JQuery: 在 mousemove 事件期间检测鼠标按钮

我试图在 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="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>

我怎样才能区分按下鼠标左键和根本没有按钮之间的区别？

69690 次浏览
小开

JQuery 规范化了 which值，因此它可以在所有浏览器中工作。我敢打赌，如果你运行你的脚本，你会发现不同的电子按钮值。

小开

当 mousedown事件(以及其他事件)触发时，这些变量将被更新; 您将看到该事件的剩余值。请注意，它们是那个事件的属性，而不是鼠标本身:

说明: 用于键或按钮事件，这个属性指示被按下的特定按钮或键。

没有值为“没有按钮按下”，因为 mousedown事件将永远不会触发，以表明没有按钮被按下。

您必须保留自己的全局[ boolean ]变量，并在 mousedown/mouseup上将其打开/关闭。

  • 这将只有在浏览器窗口有焦点时，按下按钮，这意味着焦点-开关之间的用户按下鼠标按钮和您的 mousemove事件触发将阻止这正常工作。然而，对此你真的无能为力。
小开
最佳答案

您可以编写一些代码来跟踪鼠标左键的状态，并且通过一个小函数可以在 mousemove事件中预处理事件变量。

要跟踪 LMB 的状态，请将事件绑定到 mousedown和 mouseup的文档级别，并检查 e.which是否设置或清除标志。

预处理是由我的代码中的 tweakMouseMoveEvent()函数完成的。要支持 IE 版本 < 9，您必须检查鼠标按钮是否在窗口外释放，如果是，则清除标志。然后可以更改传递的事件变量。如果 e.which最初是1(没有按钮或 LMB) ，并且左边按钮的当前状态没有被按下，只需将 e.which设置为 0，并在 mousemove事件的其余部分使用该设置来检查是否没有按下按钮。

在我的示例中，mousemove处理程序只是调用 tweak 函数，将当前事件变量传递给它，然后输出 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/

小开

由于某种原因，当绑定到 mousemove事件时，如果按下左键或不按下任何按钮，则 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);
});
小开

大多数浏览器 (< a href = “ https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/Butters # Browser _ 腰包兼容性”rel = “ noReferrer”> 除了 Safari ) *)现在支持 MouseEvent.buttons属性(注意: 复数“ button<是的trong>是的”) ，当鼠标左键按下时，该属性为1:

$('#whichkey').bind('mousemove', function(e) {
$('#log').html('Pressed: ' + e.buttons);
});

Https://jsfiddle.net/pdz2nzon/2

*)世界正在前进:
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

小开

到目前为止，以下内容可以在 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');
}
});
小开

对于寻找类似解决方案但不使用 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 */
}
}

我希望这对寻求答案的人有用。


提交答案