如何使用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');
});
当前回答
从jQuery 1.1.3版本开始,事件。使事件正常化。keyCode和事件。charCode,这样就不必担心浏览器兼容性问题。关于event.which的文档
事件。它将分别给1、2或3个鼠标左、中、右按钮,这样:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
其他回答
有很多非常好的答案,但我只想谈谈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标准甚至在理论上不支持这一点。
编辑:我在jQuery 1.7或以上版本中使用.on()将其更改为动态添加的元素:
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});
演示:jsfiddle.net/Kn9s7/5
[原文开始]这对我来说是有效的:
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
以防你有多种解决方案^^
编辑:Tim Down提出了一个很好的观点,它并不总是会是右键单击触发上下文菜单事件,但当上下文菜单键被按下时(这可以说是右键单击的替代)
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
http://jsfiddle.net/SRX3y/8/
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Button");
}
else if(e.button == 2){
alert("Right Button");
}
});
更新事物的当前状态:
var $log = $("div.log"); $("div.target").on("mousedown", function() { $log.text("Which: " + event.which); if (event.which === 1) { $(this).removeClass("right middle").addClass("left"); } else if (event.which === 2) { $(this).removeClass("left right").addClass("middle"); } else if (event.which === 3) { $(this).removeClass("left middle").addClass("right"); } }); div.target { border: 1px solid blue; height: 100px; width: 100px; } div.target.left { background-color: #0faf3d; } div.target.right { background-color: #f093df; } div.target.middle { background-color: #00afd3; } div.log { text-align: left; color: #f00; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="target"></div> <div class="log"></div>
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});