如何使用 jQuery 获取单击的鼠标按钮？
$('div').bind('click', function(){
alert('clicked');
});
这是由右键和左键触发的，能够捕捉鼠标右键的方法是什么？如果存在以下内容，我会很高兴：
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
问问题
414380 次
21 回答
940
从 jQuery 版本 1.1.3 开始，event.which规范化event.keyCode，event.charCode因此您不必担心浏览器兼容性问题。关于文档event.which
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!');
}
});
于 2010-04-27T23:52:26.963 回答
257
编辑.on()：我将其更改为在 jQuery 1.7 或更高版本中使用动态添加的元素：
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});
[原帖开始]这对我有用：
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
如果您有多种解决方案^^
编辑： Tim Down 提出了一个很好的观点，即它并不总是会right-click触发contextmenu事件，而且当上下文菜单键被按下时（可以说是 a 的替代品right-click）
于 2011-02-10T22:16:43.500 回答
86
which您可以通过检查鼠标事件上的事件对象的属性来轻松判断按下了哪个鼠标按钮：
/*
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! */
}
});
于 2009-10-29T22:20:25.517 回答
39
您还bind可以contextmenu和return 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/
于 2011-12-13T15:26:20.577 回答
30
$("#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>于 2009-07-30T12:18:21.667 回答
18
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
于 2012-08-14T13:09:29.637 回答
16
有很多很好的答案，但我只想谈谈 IE9 和 IE < 9 在使用event.button.
根据旧的 Microsoft 规范，event.button代码与 W3C 使用的代码不同。W3C 只考虑 3 种情况：
- 单击鼠标左键 -
event.button === 1 - 单击鼠标右键 -
event.button === 3 - 单击鼠标中键 -
event.button === 2
然而，在较旧的 Internet Explorer 中，微软对按下的按钮进行了一些调整，有 8 种情况：
- 未单击任何按钮 -
event.button === 0或 000 - 单击左键 -
event.button === 1或 001 - 单击右键 -
event.button === 2或 010 - 单击左右按钮 -
event.button === 3或 011 - 单击中间按钮 -
event.button === 4或 100 - 单击中间和左侧按钮 -
event.button === 5或 101 - 单击中间和右键 -
event.button === 6或 110 - 单击所有 3 个按钮 -
event.button === 7或 111
尽管理论上它应该是这样工作的，但没有任何 Internet Explorer 支持同时按下两个或三个按钮的情况。我之所以提到它，是因为 W3C 标准在理论上甚至无法支持这一点。
于 2012-10-26T14:31:44.727 回答
8
在我看来，稍微改编一下 TheVillageIdiot 的答案会更干净：
$('#element').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}
编辑：JQuery 提供了一个e.which属性，分别为左键、中键和右键返回 1、2、3。所以你也可以使用if (e.which == 3) { alert("right click"); }
于 2009-12-18T18:49:54.940 回答
4
event.which === 1确保它是左键单击（使用 jQuery 时）。
但是您还应该考虑修饰键：ctrlcmdshiftalt
如果您只对捕捉简单的、未修改的左键单击感兴趣，则可以执行以下操作：
var isSimpleClick = function (event) {
return !(
event.which !== 1 || // not a left click
event.metaKey || // "open link in new tab" (mac)
event.ctrlKey || // "open link in new tab" (windows/linux)
event.shiftKey || // "open link in new window"
event.altKey // "save link as"
);
};
$('a').on('click', function (event) {
if (isSimpleClick(event)) {
event.preventDefault();
// do something...
}
});
于 2014-05-08T10:25:19.447 回答
3
还有一种方法，不用 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
}
});
于 2015-08-04T02:17:00.900 回答
3
你可以试试这段代码：
event.button
返回值：一个数字，表示鼠标事件发生时按下的鼠标按钮。
可能的值：
- 0：鼠标左键
- 1：滚轮按钮或中间按钮（如果有）
- 2：鼠标右键
注意：Internet Explorer 8 及更早版本有不同的返回值：
- 1：鼠标左键
- 2：鼠标右键
- 4 ：滚轮按钮或中间按钮（如果存在） 注意：对于左手配置的鼠标，返回值是相反的
于 2021-10-25T07:15:00.960 回答
2
对于那些想知道他们是否应该event.which在vanilla JS或Angular中使用的人：它现在已被弃用，因此更喜欢使用它event.buttons。
注意：使用此方法和(mousedown)事件：
- 左键按下与 1 相关联
- 右键单击关联到 2
- 滚动按钮按下与 4 相关联
and (mouseup)事件不会返回相同的数字，而是返回0。
来源：https ://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
于 2020-01-06T21:28:15.250 回答
2
旧帖子 - 但认为会与上面询问所有鼠标单击事件类型的人分享完整答案。
添加此脚本，使其适用于整个页面：
var onMousedown = function (e) {
if (e.which === 1) {/* Left Mouse Click */}
else if (e.which === 2) {/* Middle Mouse Click */}
else if (e.which === 3) {/* Right Mouse Click */}
};
clickArea.addEventListener("mousedown", onMousedown);
注意：确保你'return false;' 在被点击的元素上 - 非常重要。
干杯!
于 2021-07-06T17:07:58.537 回答
1
如果您正在寻找“更好的 Javascript 鼠标事件”，它允许
- 鼠标左键
- 鼠标中键
- 鼠标右键
- 鼠标左上
- 鼠标中键
- 鼠标右键
- 左键单击
- 中键
- 右键点击
- 鼠标滚轮向上
- 鼠标滚轮向下
看看这个触发上述事件的跨浏览器普通 javascript，并消除令人头疼的工作。只需将其复制并粘贴到脚本的头部，或将其包含在<head>文档的文件中即可。然后绑定您的事件，请参阅下面的下一个代码块，该代码块显示了一个捕获事件并触发分配给它们的函数的 jquery 示例，尽管这也适用于普通的 javascript 绑定。
如果您有兴趣看到它的工作，请查看 jsFiddle： https ://jsfiddle.net/BNefn/
/**
Better Javascript Mouse Events
Author: Casey Childers
**/
(function(){
// use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};
/* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
function GetMouseButton(e) {
e = window.event || e; // Normalize event variable
var button = '';
if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
if (e.which == null) {
button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
} else {
button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
}
} else {
var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
switch (direction) {
case 120:
case 240:
case 360:
button = "up";
break;
case -120:
case -240:
case -360:
button = "down";
break;
}
}
var type = e.type
if(e.type == 'contextmenu') {type = "click";}
if(e.type == 'DOMMouseScroll') {type = "mousewheel";}
switch(button) {
case 'contextmenu':
case 'left':
case 'middle':
case 'up':
case 'down':
case 'right':
if (document.createEvent) {
event = new Event(type+':'+button);
e.target.dispatchEvent(event);
} else {
event = document.createEventObject();
e.target.fireEvent('on'+type+':'+button, event);
}
break;
}
}
addEvent(window, 'mousedown', GetMouseButton);
addEvent(window, 'mouseup', GetMouseButton);
addEvent(window, 'click', GetMouseButton);
addEvent(window, 'contextmenu', GetMouseButton);
/* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
addEvent(window, MouseWheelEvent, GetMouseButton);
})();
更好的鼠标点击事件示例（为了简单起见，使用 jquery，但以上将跨浏览器工作并触发相同的事件名称，IE 在名称之前使用）
<div id="Test"></div>
<script type="text/javascript">
$('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:right',function(e){$(this).append(e.type+'<br />');})
.on('click',function(e){$(this).append(e.type+'<br />');})
.on('click:left',function(e){$(this).append(e.type+'<br />');})
.on('click:middle',function(e){$(this).append(e.type+'<br />');})
.on('click:right',function(e){$(this).append(e.type+'<br />');})
.on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
.on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:right',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
;
</script>
对于那些需要缩小版的人......
!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();
于 2015-12-31T10:50:25.390 回答
1
$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});
于 2017-10-24T21:38:38.060 回答
1
<!DOCTYPE html>
<html>
<head>
<title>JS Mouse Events - Button Demo</title>
</head>
<body>
<button id="btn">Click me with any mouse button: left, right, middle, ...</button>
<p id="message"></p>
<script>
let btn = document.querySelector('#btn');
// disable context menu when right-mouse clicked
btn.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
// show the mouse event message
btn.addEventListener('mouseup', (e) => {
let msg = document.querySelector('#message');
switch (e.button) {
case 0:
msg.textContent = 'Left mouse button clicked.';
break;
case 1:
msg.textContent = 'Middle mouse button clicked.';
break;
case 2:
msg.textContent = 'Right mouse button clicked.';
break;
default:
msg.textContent = `Unknown mouse button code: ${event.button}`;
}
});
</script>
</body>
</html>
于 2021-10-25T08:15:51.490 回答
0
$(document).ready(function () {
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origwidthFrame = frame.width();
var origPosYGrip = $("#frame-grip").offset().top;
var origPosXGrip = $("#frame-grip").offset().left;
var gripHeight = $("#frame-grip").height();
var gripWidth = $("#frame-grip").width();
$("#frame-grip").mouseup(function (e) {
resizing = false;
});
$("#frame-grip").mousedown(function (e) {
resizing = true;
});
document.onmousemove = getMousepoints;
var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
function getMousepoints() {
if (resizing) {
var MouseBtnClick = event.which;
if (MouseBtnClick == 1) {
scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
mousex = event.clientX + scrollLeft;
mousey = event.clientY + scrollTop;
frame.height(mousey);
frame.width(mousex);
}
else {
resizing = false;
}
}
return true;
}
});
于 2013-04-30T12:37:27.140 回答
0
使用 jquery，您可以使用event object type
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});
于 2015-04-22T05:20:25.037 回答
0
$.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");
});
于 2017-03-22T22:52:16.893 回答
0
你可以试试这段代码：
事件.按钮
返回值：一个数字，表示鼠标事件发生时按下的鼠标按钮。
可能的值：
0：鼠标左键 1：滚轮键或中键（如果有） 2：鼠标右键 注意：Internet Explorer 8 和更早版本有不同的返回值：
1：鼠标左键 2：鼠标右键 4：滚轮键或中键（如果有） 注意：对于左手配置的鼠标，返回值是相反的
于 2021-10-26T08:35:24.897 回答
-1
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
于 2014-06-24T11:14:34.040 回答