<!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);它在哪里，复选框点击行为与预期相同：都离开了，点击选中该复选框，所有右键单击取消选中该复选框。onmousedown事件事件对象的行为出现异常

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

这是为什么发生？以及我能做些什么来使其行为与第一段中描述的相同，但没有alert(e.button);？

来源

2017-03-03 Manuel

'e.preventDefault（）'？ mousedown事件不会导致复选框发生更改，只会发生“click”事件，这是一个mousedown，后跟同一元素上的mouseup。 'alert（）'会扰乱这种情况并阻止发生默认点击。 – nnnnnn

nope，这仍然导致问题不幸 – derp

您可以尝试取消'click'事件。但是（除了利益的缘故）你为什么要这样做？更改标准控件行为会让用户感到困惑，如果无法通过键盘或单键鼠标使用控件，则可访问性会失败。 – nnnnnn

您可以通过点击分离事件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>

来源

2017-03-03 02:58:53

谢谢，但你能否解释为什么我原来的问题甚至可以这样工作？警报命令的特别之处是什么让脚本的行为发生了如此剧烈的变化？ – Manuel

@曼纽尔请看我的回答，我只是加了一个详细的解释。 – Dinei

谢谢@DineiRockenbach。解释是一个很好的接触。我也在寻找。 – Manuel

解释行为

从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，他的解决方案是更好的，这一个。

一种解决方案是创建一个clicable 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>

来源

2017-03-03 03:00:22 Dinei

onmousedown事件事件对象的行为出现异常

回答

解释行为

解决方案

相关问题