判断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);
    });

});

(全文完)