Javascript 检测鼠标左键按下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3944122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect left mouse button press
提问by Boris Hamanov
I hate this mess with the mouse buttons created by W3C an MS! I want to know if the left mouse button is pressed when I get a mousedown event.
我讨厌 W3C 和 MS 创建的鼠标按钮的混乱！我想知道当我收到 mousedown 事件时是否按下了鼠标左键。
I use this code
我用这个代码
// Return true if evt carries left mouse button press
function detectLeftButton(evt) {
// W3C
if (window.event == null) {
return (evt.button == 0)
}
// IE
else {
return (evt.button == 1);
}
}
However, it does not work in Opera and Chrome, because it so happens that window.event exists there too.
但是，它在 Opera 和 Chrome 中不起作用，因为碰巧 window.event 也存在那里。
So what do I do? I have some browser detection, but we all know it cannot be relied upon with all the masking some browsers do lately. How do I detect the left mouse button RELIABLY?
那我该怎么办？我有一些浏览器检测，但我们都知道它不能被某些浏览器最近所做的所有屏蔽所依赖。如何可靠地检测鼠标左键？
回答by Tim Down
Updated answer. The following will detect if the left and only the left mouse button is pressed:
更新了答案。以下将检测是否按下鼠标左键和仅按下鼠标左键：
function detectLeftButton(evt) {
evt = evt || window.event;
if ("buttons" in evt) {
return evt.buttons == 1;
}
var button = evt.which || evt.button;
return button == 1;
}
For much more information about handling mouse events in JavaScript, try http://unixpapa.com/js/mouse.html
有关在 JavaScript 中处理鼠标事件的更多信息，请尝试http://unixpapa.com/js/mouse.html
回答by robocat
There is now a W3C standardevent.buttonsproperty supported by IE9 in standards mode, and Gecko 15+.
现在有标准模式下的IE9和Gecko 15+支持的W3C 标准event.buttons属性。
The W3C completely stuffedup the event.button property, so for a standards compliant browser event.button is 0, but for browsers created before the standard, event.button is 1.
在W3C完全塞满了event.button属性，因此对符合标准的浏览器event.button是0，但对于标准之前创建的浏览器，event.button为1。
So code mustavoid using event.buttonexcept for older browsers. The following code should work:
所以代码必须避免使用event.button除了旧浏览器。以下代码应该可以工作：
function detectLeftButton(event) {
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
return false;
} else if ('buttons' in event) {
return event.buttons === 1;
} else if ('which' in event) {
return event.which === 1;
} else {
return (event.button == 1 || event.type == 'click');
}
}
回答by Rajesh Paul
You can use the following code-
您可以使用以下代码-
onmouseup="if(window.event.which==1){//code for left click}
else if(window.event.which==3){//code for right click}"
回答by Igor Krupitsky
Even though event.buttons now works in Chrome, Safari still does not support it. One workaround is to use onmousedown and onmouseup events at document or parent level like: onmousedown="bMouseDown=true" onmouseup="bMouseDown=false"
尽管 event.buttons 现在可以在 Chrome 中使用，但 Safari 仍然不支持它。一种解决方法是在文档或父级使用 onmousedown 和 onmouseup 事件，例如： onmousedown="bMouseDown=true" onmouseup="bMouseDown=false"
回答by Lucas Tettamanti
// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses
var buttonsArray = [false, false, false, false, false, false, false, false, false];
var mousePressed = false;
document.onmousedown = function(e) {
buttonsArray[e.button] = true;
mousePressed = true;
};
document.onmouseup = function(e) {
buttonsArray[e.button] = false;
mousePressed = false;
};
document.oncontextmenu = function() {
return false;
}
Explanation: When mouse is down, we change to true the pressed button in our buttons array. When mouse is up, we change to false the pressed button to false.
说明：当鼠标按下时，我们将按钮数组中按下的按钮更改为 true。当鼠标向上时，我们将按下的按钮更改为 false。
Now we can establish which button is pressed more accurately, but we have a right click problem.. because with that button we open a contextmenu at the browser, and that escapes our control... so, we disable the context menu in order to properly detect right click. If we don't do that, we must resolve left click too... and its a complication that escapes this response.
现在我们可以更准确地确定哪个按钮被按下了，但是我们有一个右键单击问题..因为使用该按钮我们在浏览器中打开了一个上下文菜单，这脱离了我们的控制......所以，我们禁用上下文菜单以便正确检测右键单击。如果我们不这样做，我们也必须解决左键单击问题……这是一种逃避此响应的并发症。
In order to simplify things, we can add another variable mousePressedand flag if mouse is down or up.
为了简化事情，我们可以添加另一个变量mousePressed并标记鼠标是按下还是按下。
Works perfect on chrome, I didn't test it in other browser but I guess its ok in firefox and opera too... IE??? I don't care IE.
在 chrome 上完美运行，我没有在其他浏览器中测试过，但我想它在 Firefox 和 Opera 中也可以...... IE ？？？我不在乎 IE。
Enjoy it!
好好享受！
