如何使用jQuery获得鼠标点击按钮?
$('div').bind('click', function(){
alert('clicked');
});
这是由右键和左键点击触发的，有什么方法可以捕捉到鼠标右键点击?如果存在以下内容，我会很高兴:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
当前回答
编辑:我在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提出了一个很好的观点，它并不总是会是右键单击触发上下文菜单事件，但当上下文菜单键被按下时(这可以说是右键单击的替代)
其他回答
使用jquery，你可以使用事件对象类型
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});
$("#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>
通过查看鼠标事件的事件对象的属性，你可以很容易地知道按下了哪个鼠标按钮:
/*
1 = Left mouse button
2 = Centre mouse button
3 = Right mouse button
*/
$([selector]).mousedown(function(e) {
if (e.which === 3) {
/* Right mouse button was clicked! */
}
});
$.fn.rightclick = function(func){
$(this).mousedown(function(event){
if(event.button == 2) {
var oncontextmenu = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
func(event);
return false;
}
});
};
$('.item').rightclick(function(e){
alert("item");
});
你可以试试下面的代码:
event.button
返回值:一个数字，表示鼠标事件发生时按下的鼠标按钮。
可能的值:
0:鼠标左键 1:车轮按钮或中间按钮(如果有) 2:鼠标右键 注意:ie8及更早版本有不同的返回值:
1:鼠标左键 2:鼠标右键 4:滚轮按钮或中间按钮(如果有的话)注意:对于左侧配置的鼠标，返回值颠倒
