js addeventlistener 为 dragenter 使用捕获不适用于输入元素

Posted 2023-05-08

【中文标题】js addeventlistener 为 dragenter 使用捕获不适用于输入元素

【英文标题】：js addeventlistener use capture for dragenter not working for input elements

【发布时间】：2015-12-04 20:02:07

【问题描述】：

我在包含输入项的容器 div 上有一个 dragenter 的事件侦听器。但它仅适用于父 div，如果您将鼠标悬停在输入上，则会触发 dragleave 事件。捕获不应该意味着输入正在触发父事件吗？

下面添加了事件监听器。

addDragStartListen: function()
        var fields = document.querySelectorAll('.formFieldType');
        [].forEach.call(fields, function(field) 
            field.addEventListener('dragstart', FORMBUILD.DragStart, true);
        );

        var DItems = document.querySelectorAll('.f-row');
        [].forEach.call(DItems, function(DItem) 
            DItem.addEventListener('dragenter', FORMBUILD.DragEnter, false);
            DItem.addEventListener('dragover', FORMBUILD.DragOver, true);
            DItem.addEventListener('dragleave', FORMBUILD.DragLeave, false);
            DItem.addEventListener('drop', FORMBUILD.DragDrop, false);
        );



    ,

看到这里的代码笔显示当您将元素拖到输入上时出现问题，dragleave 被触发。 http://codepen.io/ambrosedheffernan/pen/PPqdMd

注意：codepen 中的代码在 dragenter 上有 remove listener，在 dragleave 上有 addlistener。

我正在使用 chrome 进行测试，它应该支持捕获，但为什么我不能对输入执行此操作？是否有其他事件默认优先？

【参考方案1】：

捕获意味着事件将从父级触发到子级。 在您的情况下，我认为当您将项目拖到容器然后拖到其子输入时，dragenter 和 dragleave 被触发用于容器，dragenter 被触发用于输入。

作为一个想法，您可以创建一个变量来保存实际的拖动进入/离开状态，即当dragenter 和dragleave 发生相同的次数时，然后考虑拖动元素超出容器。

【讨论】：

谢谢队友，我想我明白你的意思了，每个子元素都在开始一个新事件？

对，每个孩子都会触发，有类似的话题讨论here，它有几个答案可能对你有帮助