Maison > interface Web > js tutoriel > le corps du texte

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

黄舟
Libérer: 2017-06-28 14:30:07
original
5812 Les gens l'ont consulté

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");
        });
Copier après la connexion

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");
});
Copier après la connexion

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");
        });
Copier après la connexion

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;
    };
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal