取消从jquery可拖动事件冒泡以单击拖动停止时的子元素答案

【问题标题】：Cancel event bubbling from jquery draggable to click on child element on drag stop取消从jquery可拖动事件冒泡以单击拖动停止时的子元素
【发布时间】：2019-03-28 00:35:54
【问题描述】：

我有一个可拖动的 div，里面有一个可点击的标签：

<div id='myDiv'>
      <a id='mylabel' onclick="alert('i am clicked')">some text</a>
</div>
$("#myDiv").draggable({
      stop: function(e){
             //want to cancel the click event on the nested a element 
             //e.preventDefault(); ??
             //e.cancelBubble(); ??
            }
});

当我停止拖动时，会触发 click 事件，这是我不想要的。我尝试了 preventDefault 并取消了 stop drop 事件，但 click 事件仍然触发。有什么想法吗？

【问题讨论】：

对不起，我之前没有看到这个结构。通常事件是自下而上的，因此如果您尝试拖动 a 元素，则会触发单击。使其工作的唯一方法是在单击上放置一个 event.preventDefault ，这与不在该元素上放置一个单击侦听器一样好。

标签： javascript jquery

【解决方案1】：

我想通了。诀窍是将点击事件附加到可拖动的 div，如下所示：

$("#myDiv").click(event.stopPropagation());

因为拖动 div 也会调用 click 事件，然后将标签传播给子项，所以 stop 拖动事件是错误的停止。消除点击传播是要走的路。

【讨论】：