当悬停在子元素上时，HTML5 dragleave 事件会被触发。

Question

当悬停在子元素上时，HTML5 dragleave 事件会被触发。

javascriptjqueryhtmldrag-and-dropjquery-events

441

我遇到的问题是，当鼠标悬停在元素的子元素上时，该元素的`dragleave`事件触发了。而且，再次悬停在父元素上时，`dragenter`也没有触发。

我创建了一个简化版本的代码片段：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不再是红色的了。即使回到下拉式的div也不会再次变成红色。必须完全移出下拉式的div并再次拖曳回来才能将其变为红色。

是否有可能防止在拖动进入子元素时触发dragleave事件？

2017更新：简而言之，在现代浏览器和IE11中工作的H.D.所描述的方法是查找CSS pointer-events:none;

- pimvdb

3

@ajm：谢谢，这在某种程度上起作用。然而，在Chrome中，进入或离开子元素时会出现闪烁，可能是因为在这种情况下仍会触发 dragleave。 - pimvdb

@fguillen：很抱歉，这与 jQuery UI 没有任何关系。事实上，甚至不需要使用 jQuery 就能触发此错误。我已经提交了一个 WebKit 错误报告，但目前还没有更新。 - pimvdb

@pimvdb，是的，我在我的 bug 中看到了答案，那个链接是你的 WebKit bug 吗？无论如何，我可以用 FireFox 复现同样的 bug :/ - fguillen

在这个解决方案中没有涉及任何CSS，感觉更加直接。使用指针事件完成了它，我现在更喜欢计数器选项。 - brittongr

1

我发现这个非常烦人的问题的最简单的解决方案是，仅侦听元素上的“enter”事件，并在事件触发时，在给定元素上创建一个绝对定位的覆盖层，只使用“leave”事件侦听器。这样可以避免在子元素上禁用指针事件（覆盖层接管每个拖动事件），并确保在应该时触发“leave”。我在vue组件中遇到了这个问题：始终在“enter”后立即触发“leave”，但实际上不知道为什么（子元素将指针事件设置为none）。 - Przemysław Melnarowicz

显示剩余3条评论

41个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abhi · Answer 1

pimvdb..

为什么不尝试使用drop而不是dragleave。这对我有用。希望这能解决你的问题。

请检查jsFiddle：http://jsfiddle.net/HU6Mk/118/

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 drop: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });