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

Question

我在包含输入项的容器 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 进行测试，它应该支持捕获，但为什么我不能对输入执行此操作？是否有其他事件默认优先？

Answer 1

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

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