Question

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

我使用mousedown事件进行左按，contextmenu事件进行右按。

这是我的代码：

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

speedDown()是我的精灵的一个功能，可以降低速度。左按和右按应该以相同的方式提高我的精灵的速度。当我释放按钮时，我的精灵会慢下来。但是当我释放我的鼠标左键时使用上面的代码它会加速但是当我按下它几秒后释放右键时它不会减速，所以我必须按下左键然后释放它以便触发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）。你可能需要处理......

如何在javascript中检测鼠标右键发布事件？

1 个答案: