通常在頁面中單機鼠標右鍵,會彈出系統上下文菜單,有沒有想過定制一下該功能實現自己想要的效果呢?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery綁定鼠標右鍵單擊事件</title> <link rel="stylesheet" type="text/css" href="../css/demos.css"/> <style type="text/css"> </style> </head> <body> <h2 id="h2-caption">jQuery綁定鼠標右鍵單擊事件</h2> <hr><br> <p>單擊鼠標右鍵進行測試</p> <br><hr> <div id="div-log"> <p>日志記錄:</p> </div> <script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script src="../../js/jquery.chromatable.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 鼠標右鍵單擊事件 ;(function( $ ){ $.fn.extend({ // 定義鼠標右鍵方法,接收一個函數參數 "rightClick" : function(fn){ // 調用這個方法后將禁止系統的右鍵慘淡 $(document).on('contextmenu',function(e){ return false; }); // 為這個對象綁定鼠標按下事件 $(this).mousedown(function(e){ // 如果按下的是右鍵,則執行函數 if(e.which == 3){ fn(); } }) } }); })(jQuery); $(function(){ $('body').rightClick(function(){ $("#div-log").html($("#div-log").html()+"<p>"+"鼠標右鍵單擊"+"</p>"); }); }); </script> </body> </html>