Problem solving on mousedown and mouseup event responses in jQuery

Recently, I have completed the playlist of a music player for a web page, and only the last progress bar is the dragging effect of the slider. My idea is this:
Use $("#pulley").mousedownevent to bind a mousemove event to this control, and then unbind the mousemove event during mouseup, but the triggering of the event always works sometimes, causing trouble. .The above code

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

The mousedown element should be bound to the mousemove event of the document or body, and the mouseup should also be bound to the document or body

Tried it The mouseleave event is triggered when the mouse moves away from the control. It is different from my concept

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

What I mean is this, mousemove is not tied to the page. If the hand shakes and moves out of the element, the event will stop.

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

I tried it, but it doesn’t seem to work. The document cannot unbind the event, and then the slider cannot stop.

The unbind should be $(document).unbind("mousemove");

Native drag You may consider some code like this

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

I feel that there are two points to consider,
1. The first mouse moves out of the target area,
If the browser The drag event is not supported, and the mouseleave event should be considered, because if the cursor moves out of the target area, the mouseup event cannot be monitored.
2. The browser supports the drag event,
I tested (chrome 53, sorry, I don’t I found out from other browsers that after the mousedown event is triggered, the drag event will be triggered as long as the mouse moves. No matter where the mouse moves, as long as the mouse button is released, the dragend event will be triggered.

Summary: If the browser supports the drag event, then use the drag event directly. If not, you have to write four event listeners at the same time.

The above is the detailed content of Problem solving on mousedown and mouseup event responses in jQuery. For more information, please follow other related articles on the PHP Chinese website!