如何防止子元素干扰 HTML5 拖放事件?
时间：2023-04-29问题描述
我有一个 <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 拖放事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！
相关文章
在 javascript 认为文档“准备好"之前，如何让How can I get my jasmine tests fixtures to load before the javascript considers the document to be quot;readyquot;?(在 javascript 认为文档“准备好- jasmine 运行和等待实际上是做什么的?What do jasmine runs and waitsFor actually do?(jasmine 运行和等待实际上是做什么的?)
- 如何提供模拟文件来更改 <input type='filHow to provide mock files to change event of lt;input type=#39;file#39;gt; for unit testing(如何提供模拟文件来更改 lt;input type=filegt; 的事
- 如何使用 Jasmine 对链式方法进行单元测试How to unit test a chained method using Jasmine(如何使用 Jasmine 对链式方法进行单元测试)
- 如何将 $rootScope 注入 AngularJS 单元测试?How do I inject $rootScope into an AngularJS unit test?(如何将 $rootScope 注入 AngularJS 单元测试?)
- Jasmine - 如何监视函数中的函数调用?Jasmine - How to spy on a function call within a function?(Jasmine - 如何监视函数中的函数调用?)