jQuery：在mousemove事件中检测按下的鼠标button
我试图检测哪个鼠标button – 如果任何 – 用户在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 码：
<!DOCTYPE html> <html> <head> <script src="jquery-1.11.1.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>
我怎么能区分按下鼠标左键和没有按键？
您可以编写一些代码来跟踪鼠标左键的状态，并且可以使用一些小函数在mousemove事件中预先处理事件variables。
为了跟踪LMB的状态，将事件绑定到mousedown和mouseup文档级别，然后检查是否设置或清除标志。
预处理由我的代码中的tweakMouseMoveEvent()函数完成。 为了支持IE版本<9，你必须检查鼠标button是否被释放到窗口之外，如果是的话就清除标志。 然后你可以改变传递的事件variables。 如果原来是1（没有button或LMB），并且没有按下左键的当前状态，只需将e.which设置为0 ，然后在mousemove事件的其余部分使用它来检查是否按下了任何button。
我的示例中的mousemove处理程序只是调用传递当前事件variables的调整函数，然后输出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); }); });
试试这里的实时演示： http : //jsfiddle.net/G5Xr2/
大多数浏览器（ Safari除外 ）现在都支持MouseEvent.buttons属性（注：多个“buttons ”），当按下鼠标左键时，该属性为1：
$('#whichkey').bind('mousemove', function(e) { $('#log').html('Pressed: ' + e.buttons); });
出于某种原因，当绑定到mousemove事件时，如果按下leftbutton或nonebutton， event.which属性将被设置为1 。
我改为mousedown事件，它工作正常：
- 左：1
- 中间：2
- 对：3
这是一个工作的例子： http : //jsfiddle.net/marcosfromero/RrXbX/
jQuery代码是：
$('p').mousedown(function(event) { console.log(event.which); $('#button').text(event.which); });
jQuery规范化which值，以便它可以跨所有浏览器使用。 我敢打赌，如果你运行你的脚本，你会发现不同的e.button值。
这些variables在mousedown事件（除其他之外）被触发时更新; 你会看到这个事件的价值。 请注意， 它们是该事件的属性 ，而不是鼠标本身的属性 ：
说明： 对于键或button事件 ，此属性指示已按下的特定button或键。
“没有button按下”没有任何价值，因为mousedown事件永远不会触发，表明没有button被按下。
你必须保持你自己的全局[boolean]variables，并在mousedown / mouseup上打开/closures它。
- 这只有当button被按下时浏览器窗口有焦点，这意味着用户按下鼠标button和鼠标移动事件触发之间的焦点切换将阻止这种操作正常工作。 但是，你可以做的事情实在太less了。
到目前为止，以下作品适用于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'); } });
对于寻找类似的解决scheme，但没有使用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 */ } }
我希望这是有用的寻求答案。
