Firefox Mousemove event.which

Question

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

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

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

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

Answer 1

总之,你不能.例如,MDN 解释说:

发生鼠标按钮事件时,可以使用许多其他属性来确定按下了哪些鼠标按钮以及鼠标指针的位置.事件的按钮属性可用于确定按下了哪个按钮,左侧按钮的可能值为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/