<!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事件事件對象的行爲出現異常

回答

解釋行爲

解決方案

相關問題