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（第一个参数是上下文）来确保 this 引用其方法中的DragDropHandler对象。由于我们创建了一个无法从全局空间到达的匿名函数，我认为在包装器事件处理程序中使用DragDropHandler引用是可以接受的。

JQuery event.stopPropagation（）不起作用

2 个答案: