将元素附加到子元素会触发父元素中的 drop 事件答案

【问题标题】：Appending an element to the child fires the drop event in the parent将元素附加到子元素会触发父元素中的 drop 事件
【发布时间】：2018-05-19 04:01:00
【问题描述】：

我对 jquery 的拖放行为有点困惑。请查看this fiddle:

我正在尝试检查可拖动元素是放在列表（子）还是 div（父）中。如果我评论附加调用，它工作正常。我尝试在孩子中插入greedy option，并在父母的事件处理程序中检查event.target，但它总是出现event.target=the parent

【问题讨论】：

【解决方案1】：

为什么要绑定droppable 小部件两次？删除关注widget

$("div.ui-droppable").droppable({
    greedy: true,
    drop: function (event, ui) {
        printEventReceiver("parent",event)
    }
})

然后，改变

$("ul.ui-droppable").droppable({

到

$(".ui-droppable").droppable({

基本上，greedy 标志仅在一个 widget 初始化的上下文中起作用。因此，最好使用一些通用类初始化一次widget，并尽可能删除重复的初始化。

【讨论】：

因为他们做不同的事情，我应该将项目附加到列表中的子可放置处理程序。父母的处理程序会做其他事情，我只是没有把它放在那里，因为它应该是一个最小的工作示例。
请查看提供的小提琴链接。
好的，我可以看到它有效，我可以在公共处理程序中检查 event.target。你能详细说明我做错了什么吗？因为我认为我绑定了两个不同的事件处理程序，一个用于 div.ui-droppable，另一个用于 ul.ui-droppable。
您所做的在技术上是正确的。为了阻止事件冒泡，JQuery 提供了greedy 标志。但是这个贪婪的标志只在一个 widget 创建的上下文中起作用。
好的，谢谢您的帮助。请编辑您的答案以包含该解释，以便其他人可以更好地理解它。我会将其标记为已接受。