如何在javascript中检测鼠标右键释放事件？

Question

我目前正在使用 mouseup 活动，但它对我不起作用。

我使用左键按下 mousedown 事件，右键按下 contextmenu 事件。

这是我的代码：

window.addEventListener('mouseup', e => {
  e.preventDefault();
  speedDown();
}, true);

speedDown() 是我的精灵减慢速度的功能。左按和右按应该以相同的方式提高我的精灵的速度。当我松开按钮时，我的精灵会变慢。但是当我释放鼠标左键时使用上面的代码它会减速但是当我按下它几秒钟后释放右键时它不会减速，所以我必须按下左键然后释放它才能触发 mouseup 事件。

有什么建议吗？

Answer 1

看来您需要结合禁用 contextmenu（如果可以，有些浏览器不允许）和 mouseup。此外，让用户点击的任何内容都不是用户select可用的 (more here) 很有用，这样重复点击就不会 select 文本。

这对我来说适用于 Chrome，请参阅评论：

// Avoid the context menu popup
window.addEventListener("contextmenu", function(e) {
  e.preventDefault();
}, false);

// Listen for mouseup
window.addEventListener("mouseup", function(e) {
  switch (e.button) {
    case 0: // Primary button ("left")
      speedUp();
      break;
    case 2: // Secondary button ("right")
      speedDown();
      break;
  }
}, false);

// Current speed
var speed = 0;
showSpeed();

// Speed functions
function speedUp() {
  ++speed;
  showSpeed();
}

function speedDown() {
  --speed;
  showSpeed();
}

function showSpeed() {
  document.getElementById("speed").innerHTML = speed;
}

/* From  */
body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

<div>Current speed: <span id="speed">0</span>
</div>
<div>Left-click to speed up</div>
<div>Right-click to slow down</div>

下面是一个更简单的示例，仅演示检测何时按下和释放鼠标按钮：

// Avoid the context menu popup
window.addEventListener("contextmenu", function(e) {
  e.preventDefault();
}, false);

// Listen for mousedown
window.addEventListener("mousedown", function(e) {
  handle(e, true);
}, false);

// Listen for mouseup
window.addEventListener("mouseup", function(e) {
  handle(e, false);
}, false);

// Our main handler
function handle(e, down) {
  var id;
  switch (e.button) {
    case 0: // Primary button ("left")
      id = "primary-status";
      break;
    case 2: // Secondary button ("right")
      id = "secondary-status";
      break;
  }
  if (id) {
    document.getElementById(id).innerHTML = down ? "Down" : "Up";
  }
}

/* From  */
body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

<div>
  Primary ("left") mouse button:
  <span id="primary-status">Unknown</span>
</div>
<div>
  Secondary ("right") mouse button:
  <span id="secondary-status">Unknown</span>
</div>

旁注：许多用户配置他们的鼠标以便按住两个按钮模拟中间按钮（e.button == 1） .您可能需要处理这些...

如何在javascript中检测鼠标右键释放事件？

How to detect right mouse button release event in javascript?

javascript

mouseevent