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

Question

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

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

这是我的代码:

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

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

有什么建议吗？

Answer 1

看起来您需要结合禁用contextmenu(如果可以的话，某些浏览器不允许)和mouseup。此外，使用户单击的任何内容都不可由用户选择 ( more here ) 很有用，这样重复单击就不会选择文本。

这对我在 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 https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */
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 https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */
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) 。您可能需要处理这个问题...