Question

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

我在主体上绑定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类添加到body处理程序中的onDragStart元素（并在拖动结束时将其删除）。这将防止子元素干扰父元素上的拖动事件。

Answer 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');
}

html5：有没有办法防止孩子干扰拖拽事件

2 个答案: