Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-06-28 14:30:07
Original
5795 Leute haben es durchsucht

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");
        });
Nach dem Login kopieren

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");
});
Nach dem Login kopieren

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");
        });
Nach dem Login kopieren

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;
    };
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!