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

沃梦达教程前端问题

2022-01-01

How to keep child elements from interfering with HTML5 dragover and drop events?(如何防止子元素干扰 HTML5 拖放事件?)

本文介绍了如何防止子元素干扰 HTML5 拖放事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 <div> 放置目标，我已将 'drop' 和 'dragover' 事件附加到该目标.<div> 包含锚标记内的图像(简单地说:<div><a><img/></a></div>).目标的子元素似乎阻止触发drop"或dragover"事件.只有当被拖动的元素在目标上方而不是在其子元素上方时，这两个事件才会按预期触发.


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 拖放事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！