如何保持子元素免受HTML5拖放和事件干扰？ [英] How to keep child elements from interfering with HTML5 dragover and drop events?

问题描述

我有一个< div> 放弃目标，我附加了'drop'和'dragover'事件。 < div> 在锚标签内包含一个图像（简单地说：< div>< a>< img /> / A>< / DIV> ）。目标的子元素似乎阻止下降或拖动事件被触发。只有当拖动的元素超过目标，而不是超过其子元素时，才会按预期触发事件。

I have a <div> drop target that I have attached 'drop' and 'dragover' events to. The <div> contains an image inside an anchor tag (simplistically: <div><a><img /></a></div>). The child elements of the target seem to block the 'drop' or 'dragover' events from being triggered. Only when the dragged element is over the target, but NOT over its child elements, are both events triggered as expected.

我希望实现的行为是无论儿童元素是否存在，都会在目标< div> 之外的任何地方触发拖和删除事件。

The behavior I would like to achieve is that the 'dragover' and 'drop' events are triggered anywhere over the target <div>, regardless of the existence of child elements.

推荐答案

有些倾斜于原来的问题，但是我在这里想到了以下几点：

Somewhat oblique to the original question, but I googled my way here wondering the following:

如何制作< img /> ，这是< div draggable =true> ...< / div> 容器，正确地作为移动该容器的句柄？

How do I make an <img />, which is the child of a <div draggable="true">...</div> container, behave correctly as a handle with which to move that container?

简单：< img src =jake.jpgdraggable =false/>

这篇关于如何保持子元素免受HTML5拖放和事件干扰？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！