代码之家  ›  专栏  ›  技术社区  ›  Sebastián Grignoli

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

  •  66
  • Sebastián Grignoli  · 技术社区  · 14 年前

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

    7 回复  |  直到 14 年前
        1
  •  61
  •   lex82    12 年前

    您可以编写一些代码来跟踪鼠标左键的状态,通过一个小函数,您可以在 mousemove 事件。

    mousedown mouseup 并检查 e.which 设置或清除旗帜。

    预处理由 tweakMouseMoveEvent() e、 哪个 0 ,并将其用于 移动鼠标 检查是否未按下按钮的事件。

    这个 移动鼠标 e、 哪个 .

    $(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/

        2
  •  19
  •   Sphinxxx    5 年前

    ( 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/
    https://bugs.webkit.org/show_bug.cgi?id=178214

        3
  •  6
  •   Mottie    14 年前

    jQuery规范化 which 值,以便它可以在所有浏览器中工作。我敢打赌,如果运行脚本,您会发现不同的e.button值。

        4
  •  6
  •   marcosfromero    14 年前

    出于某种原因,当绑定到 mousemove 事件 event.which 属性设置为 1 如果按左键或不按。

    我改成了 mousedown 事件和它工作正常:

    • 中间:2
    • 右:3

    下面是一个工作示例: http://jsfiddle.net/marcosfromero/RrXbX/

    $('p').mousedown(function(event) {
        console.log(event.which);
        $('#button').text(event.which);
    });
    
        5
  •  2
  •   Lightness Races in Orbit    14 年前

    mousedown 事件(除其他外)触发;您看到的是该事件的剩余价值。请注意 they are properties of that event

    说明: ,此属性指示已按下的特定按钮或键。

    “不按按钮”没有值,因为 鼠标按下 事件不会触发以指示没有按下按钮。

    鼠标按下 / mouseup

    • 只有当按下按钮时浏览器窗口有焦点时,这才起作用,这意味着用户按下鼠标按钮和 mousemove 事件触发将阻止其正常工作。不过,你真的没什么办法。
        6
  •  1
  •   Giancarlo Sportelli    8 年前

    截至目前,以下版本适用于Firefox47、Chrome54和Safari10。

    $('#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');
        }
    });
    
        7
  •  0
  •   Ivan dos Reis Andrade    8 年前

        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 */
          }
        }
    

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