Résolution de problèmes sur les réponses aux événements mousedown et mouseup dans jQuery

Récemment, j'ai terminé la playlist d'un lecteur de musique pour une page Web, et il ne reste que le dernier barre de progression effet de glissement du curseur. Mon idée est la suivante :
Utilisez $(" #pulley").mousedownevent pour lier un événement mousemove à ce contrôle, puis dissocier l'événement mousemove pendant mouseup, mais le déclenchement de l'événement fonctionne toujours parfois, provoquant des problèmes. .Le code ci-dessus

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

L'élément mousedown doit être lié à l'événement mousemove du document ou du corps, et l'élément mouseup doit également être lié au document ou au corps

Essayez le mouseleave L'événement est déclenché lorsque la souris s'éloigne du contrôle. C'est différent de mon concept

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

Ce que je veux dire, c'est que le déplacement de la souris n'est pas lié à la page au cas où la main tremblerait et sortirait de la page. Il vient de s'arrêter

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

Je l'ai essayé mais cela ne semble pas fonctionner. Le document ne peut pas être dissocié plus tard et le curseur ne peut pas s'arrêter

La dissociation devrait être $(document. ).unbind( "mousemove");

Pour le glisser natif, vous pouvez envisager un code comme celui-ci

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

Je pense qu'il y a deux points à considérer,
1. , la souris sort de la zone cible,
Si le navigateur ne prend pas en charge l'événement glisser, vous devez considérer l'événement mouseleave, car si le curseur sort de la zone cible, l'événement mouseup ne peut pas être surveillé
2. Le navigateur prend en charge l'événement glisser,
J'ai testé (Chrome 53, désolé, je ne connais pas les autres navigateurs). J'ai découvert plus tard qu'après le déclenchement de l'événement mousedown, l'événement glisser sera déclenché tant que le la souris se déplace. Peu importe où la souris se déplace, tant que le bouton de la souris est relâché, l'événement dragend sera déclenché

Résumé : si le navigateur prend en charge l'événement glisser, utilisez directement l'événement glisser. non, vous devez écrire quatre écouteurs d'événement en même temps.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!