Question

我正在编写一个HTML5画布绘图应用程序，我需要能够判断在mousemove事件期间是否按下了鼠标左键。在Chrome上，这可行：

if (event.which == 1) { <do stuff> }

但是在FireFox中，无论是否按下按钮，event.which 总是为1。

如何在mousemove事件期间检测鼠标按键是否被按下？

Answer 1

总之，你不能。例如，MDN explains：

当发生鼠标按钮事件时，会有许多其他属性   可用于确定按下哪些鼠标按钮和   鼠标指针的位置。可以使用事件的按钮属性   确定按下了哪个按钮，可能的值为0   左按钮，1表示中间按钮，2表示右按钮。   如果您以不同方式配置鼠标，则可能是这些值   不同。

...

按钮和细节属性仅适用于鼠标按钮   相关事件，而不是鼠标移动事件。对于mousemove事件，   例如，两个属性都将设置为0。

如果需要，可以设置适当设置标志的全局mousedown和mouseup处理程序，然后在任何给定的时间点，您可以相对精确度确定是否按下鼠标按钮

Answer 2

您应该使用变量来保持mousedown的状态。当您在画布上mousedown将其设置为true时，如果您在文档上mouseup将其设置为false ..

这样一来，只要你点击它就会被清除..

像这样的东西

var isMouseDown = false;

var draw = document.getElementById('draw');

document.addEventListener('mouseup',
                          function(){
                              isMouseDown = false;
                          },
                          false);

draw.addEventListener('mousedown',
                      function(e){
                          e.preventDefault(); // cancel element drag..
                          isMouseDown = true;
                      },
                      false);

draw.addEventListener('mousemove',
                      function(e){
                          if (isMouseDown){
                              // do the drawing ..
                          }
                      },
                      false);

http://jsfiddle.net/gaby/8JbaX/

演示

Answer 3

实际上，您可以在Firefox上查看event.buttons，它会告诉您是否按下了左按钮，右按钮或没有按钮。你需要一个if语句来区分没有event.buttons的Chrome。

Answer 4

我使用这个伪polyfill来避免FireFox mouseMove问题：

     <div class="page-content">
            <div class="container">
                <div class="row">

                <div class="m-bot-6">
                    <a href="/documents/resume.pdf" class="btn btn-medium btn-circle btn-theme-color"download>Resume</a>
                </div>
                </div>
            </div>
        </div>

我称之为＆＃34;伪＆＃34;因为它迫使我在这样移动的同时检查按钮：

function fixWhich(e) {
    if (!e.which && e.button) { // if no which, but button (IE8-)
        if (e.button & 1)
            e.which = 1; // left
        else if (e.button & 4)
            e.which = 2; // middle
        else if (e.button & 2)
            e.which = 3; // right

    }
    if (e.buttons) { //if there's buttons, i set new option buttondown (FF)
        if (e.buttons & 1)
            e.buttondown = 1; // left
        else if (e.buttons & 4)
            e.buttondown = 2; // middle
        else if (e.buttons & 2)
            e.buttondown = 3; // right

    }
}

而不是正常：

if (e.buttondown === 1) {
        //do anything
    }

Firefox Mousemove event.which

4 个答案: