Firefox鼠标移动事件.which属性是什么？

Question

我正在编写一个HTML5画布绘制应用程序，需要在mousemove事件期间能够判断左键是否按下。在Chrome浏览器上，可以使用以下代码实现：

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

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

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

- dieki

---

尝试在onmousedown事件中执行想要做的事情，而不是在onmousemove事件中执行 :) - Marwan

目前我有一个解决方案，它在mousedown事件中将一个变量（is_drawing）设置为true，然后在mouseup/mouseout事件中将其设置为false。但我不喜欢这个方法，因为如果鼠标离开画布然后重新回来，绘图不会重新开始，直到再次单击。所以一个真正的解决方案会很有帮助。 - dieki

Answer 1

简而言之，你不能。例如，MDN解释：

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

...

"button"和"detail"属性仅适用于与鼠标按钮相关的事件，而不是鼠标移动事件。例如，对于mousemove事件，这两个属性都将被设置为0。

如果您想要，您可以设置全局的mousedown和mouseup处理程序来适当地设置标志，然后在任何给定时间点，您可以相对准确地确定是否/哪个鼠标按钮被按下。

- davin

Answer 2

您应该使用一个变量来保存mousedown的状态。当您在canvas上进行 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);

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

- Gabriele Petrioli

---

没错，这就是我目前正在做的。我本来希望有更好的解决方案，但如果这是我能做的全部，那我想也只能如此了。 :P - dieki

Answer 3

其实，在Firefox上你可以检查event.buttons，它会告诉你左键、右键或都没有按下。你需要使用if语句来区分Chrome，因为它没有event.buttons。

- jacklehamster

Answer 4

我使用这个伪多态填充来避免FireFox鼠标移动问题：

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
    }

不要使用普通的方式：

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

- Filipp Procenko