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上的addlistener。

我正在测试Chrome应该支持捕获，但为什么我不能做这个输入？还有另一个事件默认优先吗？

Answer 1

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

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

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

1 个答案: