jQuery中關於​​title屬性導致觸發mousedown事件時連帶觸發mousemove事件詳解

　　大家都知道，滑鼠點擊的整個事件的執行流程是：mousedown -> mouseup -> click ，而拖放的整個流程是：mousedown -> mousemove -> mouseup -> click

　　可以來看一個正常demo，可以分別測試點擊和拖放動作

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

　　我們試著給#box 加上title屬性再來分別試試點擊事件和拖曳事件

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

　　可以發現點擊也會觸發mousemove 事件，原因就在於title。

　　並且title 屬性有個特性，就是在你滑鼠按下的時候，提示文字會隱藏，滑鼠抬起則又顯示，所以你可以嘗試下雙擊，會發現第2 次點擊會觸發click事件，因為第1 次點擊後title 還沒有顯示出來就進行了第2 次點擊，則正常觸發click 事件。

　　發現這一點後，我們就可以試著避免這個小問題，因為在某些情況下，一個物件可能需要同時具備拖放和點擊功能，並且保證這兩個功能不會衝突。最簡單的方法就是避免使用title 屬性，或者你可以參考我在HoorayOS 裡的實作：

　　在mousedown 和mouseup 時分別記錄物件的座標，並進行對比，如果完全一致則表示物件未進行拖動，否則代表物件已經拖動，這時就可以在mouseup 裡分別處理這兩種情況。

　　PS：該問題目前僅在 chrome 下發現有，其他瀏覽器似乎沒有出現。

#

以上是jQuery中關於​​title屬性導致觸發mousedown事件時連帶觸發mousemove事件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！