如何防止子元素干扰 HTML5 拖放事件?

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> 上的任何位置触发 'dragover' 和 'drop' 事件.

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.

推荐答案

您可以在 CSS 中为所有子级禁用指针事件.

You can disable the pointer-events in CSS for all children.

.targetDiv * {
    pointer-events: none;
}

这篇关于如何防止子元素干扰 HTML5 拖放事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！