如何防止交換機內部的默認值

Question

為什么case 3 preventDefault()不起作用？ 瀏覽器的菜單不應在右鍵單擊時出現。

 $('#btnB').on('mousedown', function(e){ switch (e.which) { case 1: console.log('left'); break; case 3: e.preventDefault(); console.log('right'); break; default: alert('323'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id='btnB'>CLICK</button> 

Answer 1

出現上下文菜單是因為它對不同的事件做出反應，而不是鼠標按下。 嘗試同時監聽mousedown （甚至可能不需要）和contextmenu事件：

  $('#btnB').on('mousedown contextmenu', function(e){ switch (e.which) { case 1: console.log('left'); break; case 3: e.preventDefault(); console.log('right'); break; default: alert('323'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id='btnB'>CLICK</button> 

Answer 2

與@dfsq的答案相同，但在contextmenu上捕獲了兩次觸發。 由於某種原因，我無法編輯他的答案，我想演示一個演示。

 $('#btnB').on('contextmenu mousedown', function(e) { switch (e.which) { case 1: console.log('left'); break; case 3: if (e.type !== 'contextmenu') break; e.preventDefault(); console.log('right'); break; default: alert('323'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="btnB">HAHAHA</span> 

Answer 3

如果要阻止打開上下文菜單，可以通過偵聽contextmenu事件來實現。

$('#btnB').on('contextmenu', function(e) {
            alert("hey new menu"); 
            e.preventDefault();
        });