我正在编写一个HTML5画布绘制应用程序,需要在mousemove事件期间能够判断左键是否按下。在Chrome浏览器上,可以使用以下代码实现:
if (event.which == 1) { <do stuff> }
但是在FireFox中,无论按钮是否被按下,event.which始终为1。
我如何在mousemove事件期间检测鼠标按钮是否被按下?
我正在编写一个HTML5画布绘制应用程序,需要在mousemove事件期间能够判断左键是否按下。在Chrome浏览器上,可以使用以下代码实现:
if (event.which == 1) { <do stuff> }
但是在FireFox中,无论按钮是否被按下,event.which始终为1。
我如何在mousemove事件期间检测鼠标按钮是否被按下?
当鼠标按钮事件发生时,有许多其他属性可用于确定按下了哪些鼠标按钮以及鼠标指针的位置。事件的"button"属性可用于确定按下了哪个按钮,其中可能的值为0表示左键,1表示中间按钮和2表示右键。如果您配置了不同的鼠标,这些值可能会不同。
...
"button"和"detail"属性仅适用于与鼠标按钮相关的事件,而不是鼠标移动事件。例如,对于mousemove事件,这两个属性都将被设置为0。
如果您想要,您可以设置全局的mousedown
和mouseup
处理程序来适当地设置标志,然后在任何给定时间点,您可以相对准确地确定是否/哪个鼠标按钮被按下。
您应该使用一个变量来保存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/
其实,在Firefox上你可以检查event.buttons
,它会告诉你左键、右键或都没有按下。你需要使用if语句来区分Chrome,因为它没有event.buttons
。
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
}