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

Posted 2023-05-08

【中文标题】将元素附加到子元素会触发父元素中的 drop 事件

【英文标题】：Appending an element to the child fires the drop event in the parent

【发布时间】：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，并尽可能删除重复的初始化。

在这里查看：https://jsfiddle.net/scorpy2007/yu0pontg/23/

【讨论】：

因为他们做不同的事情，我应该将项目附加到列表中的子可放置处理程序。父母的处理程序会做其他事情，我只是没有把它放在那里，因为它应该是一个最小的工作示例。

请查看提供的小提琴链接。

好的，我可以看到它有效，我可以在公共处理程序中检查 event.target。你能详细说明我做错了什么吗？因为我认为我绑定了两个不同的事件处理程序，一个用于 div.ui-droppable，另一个用于 ul.ui-droppable。

您所做的在技术上是正确的。为了阻止事件冒泡，JQuery 提供了greedy 标志。但是这个贪婪的标志只在一个 widget 创建的上下文中起作用。

好的，谢谢您的帮助。请编辑您的答案以包含该解释，以便其他人可以更好地理解它。我会将其标记为已接受。