如何使用jQuery获得鼠标点击按钮?
$('div').bind('click', function(){
alert('clicked');
});
这是由右键和左键点击触发的，有什么方法可以捕捉到鼠标右键点击?如果存在以下内容，我会很高兴:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
当前回答
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
http://jsfiddle.net/SRX3y/8/
其他回答
在我看来，稍微改编一下thevillagediot的答案会更简洁:
$('#element').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}
编辑:JQuery提供了一个e.t it属性，在左、中、右单击时分别返回1、2、3。所以你也可以使用if (e.which == 3) {alert("right click");｝
请参见:“使用中点击触发onclick事件”的回答
<!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>
有很多非常好的答案，但我只想谈谈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标准甚至在理论上不支持这一点。
$(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;
}
});
从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!');
}
});
