Javascript和jquery事件--滑鼠右鍵事件，contextmenu
阿新 • • 發佈：2019-01-10
右鍵點選觸發是瀏覽器的預設選單事件contextmenu，你可以選擇阻止它，使用event.preventDefault();或者return false;。
想要定義右鍵點選事件，關注的是mouseup或者mousedown事件，使用event獲取點選的鍵：
Js中使用event. button---0,1,2分別是左鍵、滾輪、右鍵
Jq中使用event.which---1,2,3分別是左鍵、滾輪、右鍵
<!DOCTYPE html> <html lang="zh-cn"> <head> <示例html和js程式碼meta charset="UTF-8"/> <title>滑鼠事件</title> <script src='/static/Lib/jquery/jquery-3.3.1.min.js'></script> <script src='js/jquery-3.3.1.min.js'></script> <style> #f1{ padding:10px; background:black; } #f2{ padding:10px; background:red; } #f3{ padding:10px; } #test{ background:black; color:white; padding:2px; } </style> </head> <body> <div id="f1"> <button id="button1">javascript</button> </div> <div id="f2"> <button id="button2">jquery</button> </div> <div id='f3'><a href="worker.js" target="_blank" id='test'><span></span>超連結</a></div> <script type="text/javascript"> function say(){ alert(this.innerHTML); } window.onload= function(){ //實現右鍵單擊事件 //js //關閉滑鼠右鍵預設事件 document.getElementById("button1").oncontextmenu = function(e){ e.preventDefault(); }; //設定滑鼠按鍵事件 document.getElementById("button1").onmousedown = function(e){ if(e.button ==2){ console.log("你點了右鍵"); }else if(e.button ==0){ console.log("你點了左鍵"); }else if(e.button ==1){ console.log("你點了滾輪"); } } //jq //關閉滑鼠右鍵預設事件 $('#button2').bind("contextmenu", function(){ return false; }); //設定滑鼠按鍵事件 $('#button2').on('mousedown', function(e){ if (1 == e.which) { console.log("你點了左鍵"); } else if (2 == e.which) { console.log("你點了滾輪"); } else if (3 == e.which) { console.log("你點了右鍵"); } }); }; </script> </body> </html>