JQuery event.stopPropagation（）不起作用

Question

在我的html中，我有一个嵌入在li中的类dragHandle。

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

我使用jQuery附加事件处理程序如下：

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

});

当我mousedown并将鼠标放在元素上时，我得到了向下和向上警报，但是我也得到了li的事件处理程序的点击警报。 我认为这应该通过调用mousedown和mouseup处理程序中的event.stopPropagation来防止。 如何在dragHandle上停止为mousedown / up事件调用的click事件？

TIA，亚当

Answer 1

如何在dragHandle上停止为mousedown / up事件调用的click事件？

你捕捉......然后吃...... 那个事件：

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

这里的关键是click ， mousedown和mouseup是不同的事件。 虽然你可能会认为click是一个mousedown后跟一个mouseup ，但实际上你可能有用户操作触发的click事件甚至不涉及鼠标，以及mousedown和mouseup组合不会导致任何click事件都可以。

Answer 2

您可以创建一个简单的包装器 - “类”，它可以跟踪鼠标按下和向上事件：

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

这将创建一个闭包并将事件处理委托给DragDropHandler对象。 请注意，我用function.call（第一个参数是上下文），以确保这是指它的方法内DragDropHandler对象。 由于我们创建了一个无法从全局空间到达的匿名函数，我认为在包装器事件处理程序中使用DragDropHandler引用是可以接受的。