如何使用jQuery获得单击的鼠标按钮?
$('div').bind('click', function(){
alert('clicked');
});
这是由鼠标右键和鼠标左键触发的,能捕捉鼠标右键的方式是什么? 如果以下内容存在,我将很高兴:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
#1楼
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
#2楼
$("#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; }
#3楼
有很多非常好的答案,但是我只想在使用event.button时event.button IE9和IE <9之间的一个主要区别。
根据旧的Microsoft event.button规范,该代码与W3C使用的代码不同。 W3C仅考虑3种情况:
单击鼠标左键event.button === 1
单击鼠标右键event.button === 3
单击鼠标中键event.button === 2
但是,在较旧的Internet Explorer中,Microsoft稍微按下了按钮,有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标准甚至在理论上都无法支持这一点。
#4楼
$(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;
}
});
#5楼
你可以很容易地分辨哪一个鼠标按键被检查按下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! */
}
});