大多數情況下我們使用左鍵來(lái)進(jìn)行頁(yè)面交互，而右鍵大部分對于開(kāi)發(fā)者來(lái)說(shuō)是審查元素的，有的時(shí)候我們也要自定義鼠標右鍵點(diǎn)擊行為來(lái)達到更好的交互性，常見(jiàn)的有漫畫(huà)左鍵前進(jìn)、右鍵后退。
第一步我們要屏蔽瀏覽器默認的右鍵點(diǎn)擊行為，即阻止彈出框。
首先要將阻止彈出函數綁定到目標元素上：
//阻止瀏覽器默認右鍵點(diǎn)擊事件$("div").bind("contextmenu", function(){ return false;})如此一來(lái)，div元素的右擊事件就被屏蔽了，而瀏覽器其他區域不受影響，如果你想在整個(gè)頁(yè)面屏蔽右擊事件，只需這樣做：
document.oncontextmenu = function() { return false;}接下來(lái)就可以為元素綁定右擊響應函數了：
$("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() { //阻止瀏覽器默認右鍵點(diǎn)擊事件 /*document.oncontextmenu = function() { return false; }*/ //某元素組織右鍵點(diǎn)擊事件 $("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>
聯(lián)系客服
