大多數情況下我們使用左鍵來進行頁面交互，而右鍵大部分對于開發者來說是審查元素的，有的時候我們也要自定義鼠標右鍵點擊行為來達到更好的交互性，常見的有漫畫左鍵前進、右鍵后退。
第一步我們要屏蔽瀏覽器默認的右鍵點擊行為，即阻止彈出框。
首先要將阻止彈出函數綁定到目標元素上：
//阻止瀏覽器默認右鍵點擊事件$("div").bind("contextmenu", function(){ return false;})如此一來，div元素的右擊事件就被屏蔽了，而瀏覽器其他區域不受影響，如果你想在整個頁面屏蔽右擊事件，只需這樣做：
document.oncontextmenu = function() { return false;}接下來就可以為元素綁定右擊響應函數了：
$("div").mousedown(function(e) { console.log(e.which); //右鍵為3 if (3 == e.which) { $(this).css({ "font-size": "-=2px" }); } else if (1 == e.which) { //左鍵為1 $(this).css({ "font-size": "+=3px" }); }})示例效果為右擊字體縮小，左擊字體變大，且其它區域可以響應默認右擊事件。
完整代碼：
<head> <style type="text/css"> div{ font-size:20px; } </style> <script src="../jquery.js"></script> <script> $(function() { //阻止瀏覽器默認右鍵點擊事件 /*document.oncontextmenu = function() { return false; }*/ //某元素組織右鍵點擊事件 $("div").bind("contextmenu", function(){ return false; }) $("div").mousedown(function(e) { console.log(e.which); //右鍵為3 if (3 == e.which) { $(this).css({ "font-size": "-=2px" }); } else if (1 == e.which) { //左鍵為1 $(this).css({ "font-size": "+=3px" }); } }) }) </script></head><body> <div> div </div></body>以上這篇jQuery自定義元素右鍵點擊事件(實現案例)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
