Problemlösung bei Mousedown- und Mouseup-Ereignisantworten in jQuery

Kürzlich habe ich die Wiedergabeliste eines Musikplayers für eine Webseite fertiggestellt und nur der letzte Fortschrittsbalken Slider-Drag-Effekt ist wie folgt:
Verwenden Sie $(" #pulley").mousedownevent, um ein Mousemove-Ereignis an dieses Steuerelement zu binden und dann die Bindung des Mousemove-Ereignisses während des Mouseup aufzuheben, aber das Auslösen des Ereignisses funktioniert manchmal immer und verursacht Probleme. .Der obige Code

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

Das Mousedown-Element sollte an das Mousemove-Ereignis des Dokuments oder des Körpers gebunden sein, und das Mouseup sollte auch an das Dokument oder den Körper

gebunden sein. Versuchen Sie es mit „Mouseleave“. Das Ereignis wird ausgelöst, wenn sich die Maus vom Steuerelement entfernt. Es unterscheidet sich von meinem Konzept.

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

Was ich meine, ist, dass die Mausbewegung nicht an die Seite gebunden ist, falls die Hand zittert und sich aus dem Steuerelement bewegt Element. Es hat einfach aufgehört

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

Ich habe es versucht, aber es scheint nicht zu funktionieren. Die Bindung des Dokuments kann später nicht aufgehoben werden.

Die Bindung kann nicht aufgehoben werden ).unbind( "mousemove");

Für natives Ziehen können Sie einen Code wie diesen in Betracht ziehen

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;
    };

Ich denke, es gibt zwei Punkte, die berücksichtigt werden müssen:
1 , bewegt sich die Maus aus dem Zielbereich,
Wenn der Browser das Drag-Ereignis nicht unterstützt, sollten Sie das Mouseleave-Ereignis in Betracht ziehen, denn wenn sich der Cursor aus dem Zielbereich bewegt, kann das Mouseup-Ereignis nicht überwacht werden
2. Der Browser unterstützt das Drag-Ereignis.
Ich habe es getestet (Chrome 53, ich weiß leider nichts über andere Browser). Später habe ich festgestellt, dass nach dem Auslösen des Mousedown-Ereignisses das Drag-Ereignis solange ausgelöst wird Egal wohin sich die Maus bewegt, solange die Maustaste losgelassen wird, wird das Dragend-Ereignis ausgelöst.

Zusammenfassung: Wenn der Browser das Drag-Ereignis unterstützt, verwenden Sie das Drag-Ereignis direkt Nein, Sie müssen vier Ereignis-Listener gleichzeitig schreiben.

Das obige ist der detaillierte Inhalt vonProblemlösung bei Mousedown- und Mouseup-Ereignisantworten in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!