如何使用jQuery获得鼠标点击按钮?
$('div').bind('click', function(){
alert('clicked');
});
这是由右键和左键点击触发的,有什么方法可以捕捉到鼠标右键点击?如果存在以下内容,我会很高兴:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
如何使用jQuery获得鼠标点击按钮?
$('div').bind('click', function(){
alert('clicked');
});
这是由右键和左键点击触发的,有什么方法可以捕捉到鼠标右键点击?如果存在以下内容,我会很高兴:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
当前回答
$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});
其他回答
也有一种方法,不用JQuery!
看看这个:
document.addEventListener("mousedown", function(evt) {
switch(evt.buttons) {
case 1: // left mouse
case 2: // right mouse
case 3: // middle mouse <- I didn't tested that, I just got a touchpad
}
});
有很多非常好的答案,但我只想谈谈IE9和IE < 9在使用event.button时的一个主要区别。
根据旧的微软事件规范。按钮的代码与W3C使用的代码不同。W3C只考虑3种情况:
点击鼠标左键-事件。按钮=== 1 单击鼠标右键-事件。按钮=== 3 鼠标中间按钮被单击-事件。按钮=== 2
然而,在老式的ie浏览器中,微软会为按下的按钮翻转一些,有8种情况:
没有按钮被点击-事件。按钮=== 0或000 左键被点击-事件。按钮=== 1或001 单击右键-事件。按钮=== 2或010 单击左右按钮-事件。按钮=== 3或011 中间按钮被单击-事件。按钮== 4或100 中间和左边的按钮被单击-事件。按钮== 5或101 中间和右边的按钮被单击-事件。按钮== 6或110 所有3个按钮都被单击-事件。按钮== 7或111
尽管理论上它应该是这样工作的,但没有任何ie浏览器支持同时按下两个或三个按钮的情况。我之所以提到它,是因为W3C标准甚至在理论上不支持这一点。
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
http://jsfiddle.net/SRX3y/8/
$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});
你也可以绑定到contextmenu并返回false:
$('selector').bind('contextmenu', function(e){
e.preventDefault();
//code
return false;
});
演示:http://jsfiddle.net/maniator/WS9S2/
或者你可以做一个快速插件,做同样的事情:
(function( $ ) {
$.fn.rightClick = function(method) {
$(this).bind('contextmenu rightclick', function(e){
e.preventDefault();
method();
return false;
});
};
})( jQuery );
演示:http://jsfiddle.net/maniator/WS9S2/2/
使用.on(…)jQuery >= 1.7
$(document).on("contextmenu", "selector", function(e){
e.preventDefault();
//code
return false;
}); //does not have to use `document`, it could be any container element.
演示:http://jsfiddle.net/maniator/WS9S2/283/