JQuery event.stopPropagation() not working

Question

Hi all, In my html I have a span of class dragHandle embedded within a 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>

I attach event handlers using jQuery as follows:

$(".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();

    });

When I mousedown and mouse up over the element I get the down and up alerts, however I also get the click alert of the li's event handler too. I thought that this should be prevented from by the call to event.stopPropagation in the mousedown and mouseup handlers. How do I stop the click event being called for mousedown/up events on the dragHandle?

TIA, Adam

Answer 1

How do I stop the click event being called for mousedown/up events on the dragHandle?

You capture... and eat... that event:

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

The key here is that click, mousedown, and mouseup are distinct events. Although you might think of a click as being a mousedown followed by a mouseup, in reality you might have click events triggered by user actions that don't even involve the mouse, as well as combinations of mousedown and mouseup that don't result in any click events at all.

Answer 2

You could create a simple wrapper-"class", that keeps track of mouse-down and up events:

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

This creates a closure and delegates the event handling to the DragDropHandler-object. Note that I've used function.call (the first parameter is the context) to ensure that this refers to the DragDropHandler-object inside its methods. Since we have created an anonymous function that can not be reached from global space, I think it's acceptable to use the DragDropHandler reference inside the wrapper event handlers.