javascript - js addeventlistener 使用 capture for 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 上的监听器并添加了 Dragleave 上的监听器。

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

Answer 1

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

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