CODEWITHSUNDEEP
javascripthtml
David
David

Reputation: 5937

js addeventlistener use capture for dragenter not working for input elements

I have a event listener for dragenter on a container div holding input items. But it only works on the parent div, if you hover over the inputs the dragleave event is triggered. Should capture not mean that the inputs are triggering the parent event?

The event listeners are added below.

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



    },

See here for a codepen showing the issue when you drag the element over the inputs, dragleave is triggered. http://codepen.io/ambrosedheffernan/pen/PPqdMd

note: the code in codepen has remove listener on dragenter and addlistener on dragleave.

I am testing in chrome which should support capture but why can i not do this for inputs? is there another event that is taking precedence by default?

Upvotes: 0

Views: 677

Answers (1)

paulitto
paulitto

Reputation: 4673

Capture means that events will be triggered from parent to child. In your case I think when you drag item to container and then to its child input, dragenter and dragleave gets triggered for container and dragenter triggered for input.

As an idea, you can create a variable that would hold actual drag entered/leaved state, i.e. when dragenter and dragleave happened same amount of times, then consider dragged element to be out of container.

Upvotes: 1

Related Questions