關於jQuery中mousedown和mouseup事件回應的問題解決-js教程-PHP中文網

關於jQuery中mousedown和mouseup事件回應的問題解決

黄舟

發布： 2017-06-28 14:30:07

原創

5835 人瀏覽過

最近在做一個網頁的音樂播放器播放清單什麼的都完成了,只剩最後一個進度條滑塊的拖曳效果了,我的思路是這樣的:
由$("#pulley").mousedown事件給這個控制項bind一個mousemove事件然後在mouseup的時候將mousemove事件解綁,但是事件的觸發總是時靈時不靈的苦惱中 . .上程式碼

  $("#pulley").mousedown(function(){
            $("#pulley").bind("mousemove", function(e){
                $("#debug").text("start");
                setschdule(e);
            });
        });
        $("*").mouseup(function(){
            $("#pulley").unbind("mousemove");
            $("#debug").text("test");
        });

登入後複製

該元素mousedown的是應該給document或body綁定mousemove事件，mouseup也應該綁定在document或body上

試過了mouseleave事件是指滑鼠移開該控制項時觸發.. 和我的概念不一樣

$("#pulley").mousedown(function () {
    //此处绑定document
    $(document).bind("mousemove", function (e) {
        $("#debug").text("start");
        setschdule(e);
    });
});
$(document).mouseup(function () {
    //同上
    $(document).unbind("mousemove");
    $("#debug").text("test");
});

登入後複製

我的意思是這樣，mousemove不綁在頁面裡萬一手抖移出元素外事件不就停了

   
$("#pulley").mousedown(function(){
            $(document).bind("mousemove", function(e){
                $("#debug").text("start");
                setschdule(e);
            });
        });
        $(document).mouseup(function(){
            $("#pulley").unbind("mousemove");
            $("#debug").text("close");
        });

登入後複製

試過了好像不可以後面document解綁不了事件然後滑桿就停不下來了

解綁應該是$(document).unbind("mousemove");

#原生的拖曳你可能考慮些這樣的程式碼

oDiv2.onmousedown = function(ev){
        var ev = ev || window.event;
        disY = ev.clientY - oDiv2.offsetTop;
         
        document.onmousemove = function(ev){
            var ev = ev || window.event;
             
            var T = ev.clientY - disY;
             
            scrollBar(T);
             
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };

登入後複製

我感覺需要考慮兩點需要考慮，
1、第一滑鼠移出目標區域，
如果瀏覽器不支援drag事件，應該考慮mouseleave事件，因為如果遊標移出了目標區域，也就無法監控到mouseup事件了
2、瀏覽器支援drag事件，
我測試（chrome 53，對不起，我不知道由其它的瀏覽器）後發現，在mousedown事件觸發之後，只要滑鼠移動就會觸發drag事件，不管滑鼠移動到哪裡，只要放開滑鼠按鍵，就會觸發dragend事件

總結：如果瀏覽器支援drag事件，那麼直接使用drag事件，如果不支援的話，就得用同時寫四個事件監聽器了。

以上是關於jQuery中mousedown和mouseup事件回應的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！