jQuery：在 mousemove 事件期间检测按下的鼠标按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4065992/
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
jQuery: Detecting pressed mouse button during mousemove event
提问by Sebastián Grignoli
I tried to detect which mouse button -if any- is the user pressing during a mousemove event under jQuery, but I'm getting ambiguous results:
我试图检测用户在 jQuery 下的 mousemove 事件期间按下了哪个鼠标按钮（如果有），但我得到的结果不明确：
no button pressed: e.which = 1 e.button = 0
left button pressed: e.which = 1 e.button = 0
middle button pressed: e.which = 2 e.button = 1
right button pressed: e.which = 3 e.button = 2
Code:
代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').bind('mousemove',function(e){
$('#log').html(e.which + ' : ' + e.button );
}); </script>
</body>
</html>
How can I tell the difference between left mouse button pressed and no button at all?
如何区分按下鼠标左键和根本没有按钮之间的区别？
采纳答案by DarthJDG
You can write a bit of code to keep track of the state of the left mouse button, and with a little function you can pre-process the event variable in the mousemoveevent.
您可以编写一些代码来跟踪鼠标左键的状态，并通过一个小函数可以对事件中的事件变量进行预处理mousemove。
To keep track of the state of the LMB, bind an event to document level for mousedownand mouseupand check for e.whichto set or clear the flag.
为了跟踪LMB的状态，绑定一个事件，文件级别mousedown和mouseup时间并为您e.which设置或清除该标志。
The pre-processing is done by the tweakMouseMoveEvent()function in my code. To support IE versions < 9, you have to check if mouse buttons were released outside the window and clear the flag if so. Then you can change the passed event variable. If e.whichwas originally 1 (no button or LMB) and the current state of the left button is not pressed, just set e.whichto 0, and use that in the rest of your mousemoveevent to check for no buttons pressed.
预处理由tweakMouseMoveEvent()我代码中的函数完成。要支持 IE 版本 < 9，您必须检查鼠标按钮是否在窗口外释放，如果是，则清除标志。然后您可以更改传递的事件变量。如果e.which最初是 1（没有按钮或 LMB）并且左按钮的当前状态没有被按下，只需设置e.which为0，并在mousemove事件的其余部分使用它来检查没有按下任何按钮。
The mousemovehandler in my example just calls the tweak function passing the current event variable through, then outputs the value of e.which.
mousemove我的示例中的处理程序只是调用传递当前事件变量的调整函数，然后输出e.which.
$(function() {
var leftButtonDown = false;
$(document).mousedown(function(e){
// Left mouse button was pressed, set flag
if(e.which === 1) leftButtonDown = true;
});
$(document).mouseup(function(e){
// Left mouse button was released, clear flag
if(e.which === 1) leftButtonDown = false;
});
function tweakMouseMoveEvent(e){
// Check from jQuery UI for IE versions < 9
if ($.browser.msie && !e.button && !(document.documentMode >= 9)) {
leftButtonDown = false;
}
// If left button is not set, set which to 0
// This indicates no buttons pressed
if(e.which === 1 && !leftButtonDown) e.which = 0;
}
$(document).mousemove(function(e) {
// Call the tweak function to check for LMB and set correct e.which
tweakMouseMoveEvent(e);
$('body').text('which: ' + e.which);
});
});
Try a live demo here: http://jsfiddle.net/G5Xr2/
在这里尝试现场演示：http: //jsfiddle.net/G5Xr2/
回答by Sphinxxx
Most browsers (except Safari)*) now support the MouseEvent.buttonsproperty (note: plural "buttons"), which is 1 when the left mouse button is pressed:
大多数浏览器（Safari 除外）*）现在支持该MouseEvent.buttons属性（注意：复数“button s”），按下鼠标左键时为1：
$('#whichkey').bind('mousemove', function(e) {
$('#log').html('Pressed: ' + e.buttons);
});
https://jsfiddle.net/pdz2nzon/2
https://jsfiddle.net/pdz2nzon/2
*) The world is moving forward:
https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/
https://bugs.webkit.org/show_bug.cgi?id=178214
*) 世界在向前发展：
https: //webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/
https://bugs.webkit.org/show_bug.cgi?id=178214
回答by marcosfromero
For some reason, when binding to mousemoveevent, the event.whichproperty is set to 1if left button or none is pressed.
出于某种原因，当绑定到mousemove事件时，该event.which属性设置为1是否按下左按钮或没有按下。
I changed to mousedownevent and it worked Ok:
我改为mousedown事件，它工作正常：
- left: 1
- middle: 2
- right: 3
- 左：1
- 中间：2
- 右：3
Here's a working example: http://jsfiddle.net/marcosfromero/RrXbX/
这是一个工作示例：http: //jsfiddle.net/marcosfromero/RrXbX/
The jQuery code is:
jQuery 代码是：
$('p').mousedown(function(event) {
console.log(event.which);
$('#button').text(event.which);
});
回答by Mottie
回答by Lightness Races in Orbit
Those variables are updated when the mousedownevent (amongst others) fires; you're seeing the value that remains from that event. Note that they are properties of that event, not of the mouse itself:
当mousedown事件（除其他外）触发时，这些变量会更新；你看到了那个事件留下的价值。请注意，它们是该 event 的属性，而不是鼠标本身的属性：
Description: For key or button events, this attribute indicates the specific button or key that was pressed.
说明：对于键或按钮事件，该属性指示按下的特定按钮或键。
There is no value for "no button press", because the mousedownevent will never fire to indicate that there's no button being pressed.
“no button press”没有值，因为mousedown事件永远不会触发以指示没有按钮被按下。
You'll have to keep your own global [boolean] variable and toggle it on/off on mousedown/mouseup.
你必须保持自己的全球[布尔]变量，其启用/关闭mousedown/ mouseup。
- This will only work if the browser window had focus when the button was pressed, which means a focus-switch between the user depressing the mouse button and your
mousemoveevent firing will prevent this from working properly. However, there's really not much you can do about that.
- 这仅在按下按钮时浏览器窗口具有焦点时才有效，这意味着用户按下鼠标按钮和
mousemove事件触发之间的焦点切换将阻止其正常工作。然而，你真的无能为力。
回答by Giancarlo Sportelli
As of the date, the following works on Firefox 47, Chrome 54 and Safari 10.
截至目前，以下内容适用于 Firefox 47、Chrome 54 和 Safari 10。
$('#whichkey').bind('mousemove',function(e){
if (e.buttons & 1 || (e.buttons === undefined && e.which == 1)) {
$('#log').html('left button pressed');
} else if (e.buttons & 2 || (e.buttons === undefined && e.which == 3)) {
$('#log').html('right button pressed');
} else {
$('#log').html('no button pressed');
}
});
回答by Ivan dos Reis Andrade
For users looking for similar solution but without the use of JQuery, here is a way of how I solved my problem:
对于寻找类似解决方案但不使用 JQuery 的用户，以下是我解决问题的方法：
canvas.addEventListener("mousemove", updatePosition_mouseNtouch);
function updatePosition_mouseNtouch (evt) {
// IF mouse is down THEN set button press flag
if(evt.which === 1)
leftButtonDown = true;
// If you need to detect other buttons, then make this here
// ... else if(evt.which === 2) middleButtonDown = true;
// ... else if(evt.which === 3) rightButtonDown = true;
// IF no mouse button is pressed THEN reset press flag(s)
else
leftButtonDown = false;
if (leftButtonDown) {
/* do some stuff */
}
}
I hope this is usefull to someone seeking an answer.
我希望这对寻求答案的人有用。
