JQuery event.stopPropagation () ne fonctionne pas

Dans mon html j'ai un span de classe dragHandle intégré au sein d'un li.

<div class='treeView'>
    <ul class='tree'>
        <li><span class="dragHandle"></span>Item 1
            <ul>
                <li><span class="dragHandle"></span>Item 2 <a href="#">link</a></li>
            </ul>   
        </li>
</ul>

- Je joindre des gestionnaires d'événement à l'aide de jQuery comme suit:

$(".tree li").click(function(event) {
    alert("click");
    event.stopPropagation();
});

$(".dragHandle").mousedown(function(event) {
    alert("down");
    event.stopPropagation();

});

$(".dragHandle").mouseup(function(event) {
    alert("Up");
    event.stopPropagation();

});

Quand je mousedown et de la souris sur l'élément que je reçois le bas et le haut, alertes, cependant j'ai aussi le clic d'alerte de la batterie au lithium du gestionnaire d'événement. Je pense qu'il devrait être empêché par l'appel à la manifestation.stopPropagation dans les événements mousedown et mouseup gestionnaires. Comment puis-je arrêter l'événement click d'être appelé pour mousedown/événements sur le dragHandle?

TIA,
Adam

source d'informationauteur apchester | 2009-07-26

  1. 16

    Comment puis-je arrêter l'événement click d'être appelé pour mousedown/événements sur le dragHandle?

    Vous capture... et de manger... que événement:

    $(".dragHandle").click(function(event) { event.stopPropagation(); });

    La clé ici est que clickmousedownet mouseup sont des événements distincts. Bien que vous pourriez penser à un click comme étant un mousedown suivie par un mouseupen réalité, vous pourriez avoir click événements déclenchés par l'utilisateur des actions qui ne sont même pas impliquer la souris, ainsi que des combinaisons de mousedown et mouseup qui n'étaient pas le résultat en tout click des manifestations à tous.

  2. 3

    Vous pouvez créer un simple wrapper-"classe", qui conserve la trace de la souris vers le bas et d'événements:

    (function () {
   var DragDropHandler = {
      isDrag: false,

      mouseDownHandler: function (event) {
        alert("down");
        event.stopPropagation();
        this.isDrag = true;
      },

      mouseUpHandler: function (event) {
        alert("Up");
        event.stopPropagation();
        this.isDrag = false;
      },

      clickHandler: function (event) {
         event.stopPropagation();
         //Check if we've already received a mouseDown-event. If we have,
         //disregard the click event since we want drag-functionality
         if(this.isDrag) { return; }
         alert("click");
      }
   };

   $(".tree li").click(function(event) {
      DragDropHandler.clickHandler.call(DragDropHandler, event);
   });
   $(".dragHandle").mousedown(function(event) {
      DragDropHandler.mouseDownHandler.call(DragDropHandler, event);
   });
   $(".dragHandle").mouseup(function(event) {
      DragDropHandler.mouseUpHandler.call(DragDropHandler, event);
   });
})();

    Cela crée une fermeture et délègue la gestion des événements de la DragDropHandler-objet. Notez que j'ai utilisé la fonction.l'appel (le premier paramètre est le contexte) pour s'assurer que ce se réfère à la DragDropHandler-objet à l'intérieur de ses méthodes. Depuis, nous avons créé une fonction anonyme qui ne peut pas être atteint à partir de l'espace mondial, je pense qu'il est acceptable d'utiliser la DragDropHandler de référence à l'intérieur de l'emballage des gestionnaires d'événements.