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

Question 1

我试图检测用户在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>

如何分辨按下鼠标左键和根本没有按钮之间的区别？

Question 2

您可以编写一些代码来跟踪鼠标左键的状态，并使用一些小功能可以对事件中的事件变量进行预处理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/

Question 3

现在，大多数浏览器~~（Safari除外）~~ *）支持该MouseEvent.buttons属性（注意：复数“ button 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/
https://bugs.webkit.org/show_bug.cgi?id=178214

Question 4

jQuery标准化了该which值，因此它将可在所有浏览器中使用。我敢打赌，如果您运行脚本，将会发现不同的e.button值。

Question 5

出于某些原因，绑定到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);
});

Question 6

当mousedown事件（以及其他事件）触发时，将更新这些变量；您会看到该事件保留的价值。请注意，它们是该事件的属性，而不是鼠标本身的属性：

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

没有“没有按钮按下”的值，因为该mousedown事件将永远不会触发以指示没有按钮按下。

你必须保持自己的全球[布尔]变量，其启用/关闭mousedown/ mouseup。

仅当按下按钮时浏览器窗口具有焦点时，这才起作用，这意味着在用户按下鼠标按钮和mousemove事件触发之间进行焦点切换将阻止其正常工作。但是，您实际上无能为力。

Question 7

截至目前，以下功能适用于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');
    }
});

Question 8

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

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