概述
我有以下 HTML 结构,并附上了 dragenter
和 dragleave
<div id="dropzone">
的事件元素。
<div id="dropzone">
<div id="dropzone-content">
<div id="drag-n-drop">
<div class="text">this is some text</div>
<div class="text">this is a container with text and images</div>
</div>
</div>
</div>
问题
当我将文件拖到 <div id="dropzone">
上时, dragenter
事件按预期触发。但是,当我将鼠标移到子元素上时,例如 <div id="drag-n-drop">
, dragenter
为 <div id="drag-n-drop">
触发事件元素,然后是 dragleave
为 <div id="dropzone">
触发事件元素。
如果我将鼠标悬停在 <div id="dropzone">
再次元素,dragenter
事件再次被触发,这很酷,但是之后 dragleave
为刚刚离开的子元素触发事件,因此 removeClass
指令被执行,不爽。
这种行为存在问题的原因有两个:
我只是附上
dragenter
&dragleave
到<div id="dropzone">
所以我不明白为什么子元素也附加了这些事件。我还在拖
<div id="dropzone">
元素悬停在其子元素上,所以我不想要dragleave
开火!
jsFiddle
这里有一个 jsFiddle 可以修改:http://jsfiddle.net/yYF3S/2/
问题
那么...当我将文件拖到 <div id="dropzone">
上时,我怎样才能做到这一点?元素,dragleave
即使我拖过任何子元素也不会触发...它只会在我离开 <div id="dropzone">
时触发元素...在元素边界内的任何地方悬停/拖动不应触发dragleave
事件。
我需要它是跨浏览器兼容的,至少在支持 HTML5 拖放的浏览器中,所以 this answer还不够。
Google 和 Dropbox 似乎已经解决了这个问题,但是他们的源代码被缩小/复杂,所以我无法从他们的实现中解决这个问题。
最佳答案
如果您不需要将事件绑定(bind)到子元素,您可以随时使用 pointer-events 属性。
.child-elements {
pointer-events: none;
}
关于jquery - 拖动子元素时触发父元素的“dragleave”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10867506/