javascript - html5 : is there a way to prevent children interfering with drag events

Question

我在 html5 拖放方面遇到了一些问题。我没有看到一个简单的方法。基本上我有一些“盒子”，里面有一些其他的 html 元素。父框是可拖动的，它们可以相互放置。

我在 body 上绑定(bind)了 dragover 事件来处理整个页面上的拖放。问题是，当您拖动框时 - 有时会在子元素上触发事件，而父元素根本不会收到此事件。

有没有一种简单的方法可以防止这种情况发生？

基本上，只要鼠标位于目标框区域，我就希望触发 dragover 事件。我知道有几种方法可以解决这个问题，但它们真的很难看，我想知道是否有一些简单的方法。

谢谢你的意见

我在代码中所做的简短版本:

document.addEventListener('dragenter', function(e) {

    if (e.target.className == 'candrophere')
        // cancel out "e" to allow drop


}, false);

但在我的例子中，子元素几乎占据了整个“.candrophere”框，因此事件几乎从未在正确的目标上触发(尤其是当我更快地移动鼠标时)

Answer 1

css pointer-events 规则阻止鼠标交互事件在应用它的元素上触发，但目前 IE 不支持 (http://caniuse.com/pointer-events)。

我用来解决这个问题的解决方法是添加类似的内容

.is-drag-in-progress .child-elements
{
    pointer-events:none;
}

到您的 CSS，并将 is-drag-in-progress 类添加到 onDragStart 处理程序中的 body 元素(并删除它在拖动结束时)。这将防止子元素干扰父元素上的拖动事件。