問題描述
我有一個 <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模板網！