解释行为

Question

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>testing</title>
        </head>
        <body>
            <input type="checkbox" id="test">
            <script>
                var t = document.getElementById("test");
                t.onmousedown = function(e) {
                    if (e.button === 0)
                        t.checked = true;
                    else if (e.button === 2)
                        t.checked = false;

                    alert(e.button);
                }
            </script>
        </body>
    </html>

如果我将行alert(e.button);留在原来的位置，则复选框点击会按预期运行：所有左键单击都会选中复选框，所有右键单击都会取消选中该复选框。

如果我删除了代码alert(e.button);，那么突然间，左键单击将会检查，然后立即取消选中该复选框，右键单击将不会执行任何操作，只需打开上下文菜单。

为什么会这样？我能做些什么才能让它像我在第一段中描述的那样表现但没有alert(e.button);？

Answer 1

您可以尝试将点击事件分为onlick（左键单击）和oncontextmenu（右键单击）。另请记住return false;以阻止显示内容菜单。

var t = document.getElementById("test");

t.onclick = function(e) {
  t.checked = true;
}
t.oncontextmenu = function(e){
  t.checked = false;
  return false;
}

  <html>
      <head>
          <meta charset="utf-8">
          <title>testing</title>
      </head>
      <body>
          <input type="checkbox" id="test">
      </body>
  </html>

Answer 2

解释行为

来自W3 schools onmousedown Event：

与onmousedown事件相关的事件顺序（对于左/中鼠标）   按钮）：


onmousedown

onmouseup

的onclick

与onmousedown事件相关的事件顺序（右边   鼠标按钮）：


onmousedown

onmouseup

oncontextmenu

浏览器会“检查”onclick事件的复选框，因为您可以看到onmousedown事件发生之前。

当alert(e.button)触发时，下一个事件的流被消息框中断，因此onclick事件永远不会发生，并且您的代码通过设置checked属性来检查复选框。如果您没有alert(e.button)，则代码会选中复选框，onclick事件会立即取消选中。

解决方案

请参阅Ngoan Tran's answer，他的解决方案要远胜于此。

一个解决方案可能是在复选框上方创建一个可引用的div，尽管这可能会增加可用性问题。

.container-div {
  position:relative;
}
.clicable-div {
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  z-index:1;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>testing</title>
    </head>
    <body>
        <div class="container-div">
          <div class="clicable-div" id="clicable"></div>
          <input type="checkbox" id="test">
        </div>
        <script>
            var t = document.getElementById("clicable");
            var c = document.getElementById("test");
            t.onmousedown = function(e) {
                if (e.button === 0)
                    c.checked = true;
                else if (e.button === 2)
                    c.checked = false;
            };
            //Disables the contextual menu on right button click!
            t.oncontextmenu = function() {
              return false;
            };
        </script>
    </body>
</html>

onmousedown事件对象表现得很奇怪

2 个答案:

解释行为

解决方案