我遇到的问题是当悬停该元素的子元素时会触发该元素的 dragleave
事件。另外,dragenter
在再次悬停父元素时不会触发。
我做了一个简化的 fiddle :http://jsfiddle.net/pimvdb/HU6Mk/1/ .
HTML:
<div id="drag" draggable="true">drag me</div>
<hr>
<div id="drop">
drop here
<p>child</p>
parent
</div>
使用以下 JavaScript:
$('#drop').bind({
dragenter: function() {
$(this).addClass('red');
},
dragleave: function() {
$(this).removeClass('red');
}
});
$('#drag').bind({
dragstart: function(e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
}
});
它应该做的是在拖动某些东西时通过将 div
放置为红色来通知用户。这可行,但如果您拖入 p
子项,则 dragleave
会被触发,并且 div
不再是红色的。回到 drop div
也不会让它再次变红。需要完全移出drop div
并再次拖回它以使其变为红色。
是否可以防止 dragleave
在拖入子元素时触发?
2017 年更新: TL;DR,查找 CSS pointer-events: none;
,如下面@H.D. 的回答中所述,适用于现代浏览器和 IE11。
最佳答案
你只需要保留一个引用计数器,当你得到一个 dragenter 时增加它,当你得到一个 dragleave 时减少它。当计数器为 0 时 - 删除该类。
var counter = 0;
$('#drop').bind({
dragenter: function(ev) {
ev.preventDefault(); // needed for IE
counter++;
$(this).addClass('red');
},
dragleave: function() {
counter--;
if (counter === 0) {
$(this).removeClass('red');
}
}
});
注意:在 drop 事件中,将计数器重置为零,并清除添加的类。
你可以运行它here
关于javascript - 悬停子元素时触发 HTML5 dragleave,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7110353/