判断mouse左键是否被按下?
今天有个需求要判断当前鼠标左键是否被按下,因为只有在此时才需要做一些特别的逻辑使代码运行正常,来完成正确的workflow。google了一下,还是在stackoverflow上找到一篇靠谱的文章,原文链接猛点此处。总结一下如下:
jQuery中的行为:
在mouse move事件中,查看当前鼠标左键、中键、右键状态时的情况:
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
可以看到没有button按下和左键按下的时候,e.which和e.button的值是一样的,这样就导致冲突。
这里提到event.which,对于鼠标事件,1代表左键,2代表中键,3代表右键。同事对于键盘事件,我们同样可以用event.which来判断当前是哪个键。具体可以参考jQuery event.which。很显然在mouse move事件中,事情并不全是这样,当没有button被按下时,e.which=1,这是错误的。(笔者没有自己去试,也没有去看为什么会这样。)
解决方案
原文上给出了比较简单的解决方案,基本思路就是用一个全局的flag来记录当前左键的状态,贴上代码:
$(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 && !(document.documentMode >= 9) && !event.button) {
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);
});
});
(全文完)