html5：有没有办法防止儿童干扰拖动事件答案

【问题标题】：html5: is there a way to prevent children interfering with drag eventshtml5：有没有办法防止儿童干扰拖动事件
【发布时间】：2012-09-20 09:18:21
【问题描述】：

我在使用 html5 拖放时遇到了一点问题。我看不出有什么简单的办法摆脱它。基本上我有一些“盒子”，里面有一些其他的html元素。父框是可拖动的，它们可以相互放置。

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

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

基本上，我希望鼠标在目标框区域内时触发 dragover 事件。我知道解决这个问题的几种方法，但它们真的很丑，我想知道是否有一些简单的方法。

感谢您的意见

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

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

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


}, false);

但在我的情况下，子元素几乎占据了整个 '.candrophere' 框，因此事件几乎永远不会在正确的目标上触发（尤其是当我更快地移动鼠标时）

【问题讨论】：

您应该发布失败的代码，以便人们可以帮助您。
更新了一些伪代码，没有任何干扰
我可以通过简单地使用 dragover 事件而不是 dragenter 事件来解决这个问题

标签： javascript html drag-and-drop

【解决方案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 元素（并在拖动结束时将其删除）。这将防止子元素干扰父元素上的拖动事件。

【讨论】：

【解决方案2】：

基本上我的解决方案如下：

由于 e.target 和 e.currentTarget 大部分时间无法匹配到父框 - 剩下要做的就是手动检查 e.target 是否是父框的子框。有很多方法可以做到这一点，但我使用的是自定义函数。这里不能发，因为它是基于我自己的框架，没有它无论如何都无法工作，但伪代码如下：

// target is a framework object (much like jquery)
closestDroppableParent = function(target)
{
    // i know that all children in those boxes will not be any deeper than this
    var max_levels = 5;

    while (target && max_levels > 0)
    {
        max_levels--;

        // droppable boxes have data-droptype attribute set so only other boxes with the same attribute
        // can be dropped on them. This check can be done any way you like. You can have a custom class
        // for droppable objects, check for draggable attribute etc...
        // .data() is a framework function that returns the value of the data-* attributes
        if (target.data('droptype'))
            return target;

        // .parent() is a framework function to get parent node
        target = target.parent();
    }

    return null;
}


// drag over event
dragOverEventHandler = function(e)
{
    // convert the element to its closest droppable parent
            // $() is much like jquery
    var closest = closestDroppableParent($(e.target));

    if (closest)
        closest.addClass('draggedOver');
}

【讨论】：