javascript - 悬停子元素时触发 HTML5 dragleave

Question

我遇到的问题是当悬停该元素的子元素时会触发该元素的 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。

Answer 1

你只需要保留一个引用计数器，当你得到一个 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