Question

我尝试检测哪个鼠标按钮 - 如果用户在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>

如何判断按下鼠标左键与没有按钮之间的区别？

Answer 1

您可以编写一些代码来跟踪鼠标左键的状态，只需一点功能，您就可以在mousemove事件中预处理事件变量。

要跟踪LMB的状态，请将事件绑定到mousedown和mouseup的文档级别，然后检查e.which以设置或清除该标记。

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

我的示例中的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/

Answer 2

大多数浏览器（except Safari）*）现在支持MouseEvent.buttons属性（注意：复数“按钮 s ”），按下鼠标左键时为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/ 的

Answer 3

出于某种原因，绑定到mousemove事件时，如果按下了左键或没有按下，则event.which属性设置为1。

我更改为mousedown事件并且工作正常：

left：1
中：2
右：3

以下是一个有效的例子：http://jsfiddle.net/marcosfromero/RrXbX/

jQuery代码是：

$('p').mousedown(function(event) {
    console.log(event.which);
    $('#button').text(event.which);
});

Answer 4

jQuery规范化which值，以便它适用于所有浏览器。我敢打赌，如果你运行你的脚本，你会发现不同的e.button值。

Answer 5

当mousedown事件（以及其他事件）触发时，这些变量会更新;你看到了那个事件的价值。请注意they are properties of that event，而不是鼠标本身：

说明：对于按键或按钮事件，此属性表示按下的特定按钮或按键。

“没有按下按钮”没有值，因为mousedown事件永远不会触发，表示没有按下任何按钮。

您必须保留自己的全局[布尔]变量，并在mousedown / mouseup上启用/关闭它。

仅当按下按钮时浏览器窗口具有焦点时才会起作用，这意味着用户按下鼠标按钮和mousemove事件触发之间的焦点切换将阻止其正常工作。但是，你真的没什么可做的。

Answer 6

截至日期，以下内容适用于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');
    }
});

Answer 7

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

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

jQuery：在mousemove事件期间检测按下的鼠标按钮

7 个答案: