How can the "dragenter" event be allowed to pass through child elements?

Question

How can the "dragenter" event be allowed to pass through child elements?

The structure of my document is as follows:

<div id="container">
  <div id="inner"></div>
</div>

I have added listeners for dragEnter and dragLeave to the container element.

However, when I drag into the file, it triggers both the container's dragLeaver event and the 'dragEnter' event as it passes through the child element.

Is there a way to prevent this from happening on the parent element?

I attempted adding pointer-events: none to the inner element, but that solution did not meet my desired outcome. I would like the child elements to still be interactable.

javascript html css

Answer 1

Answer №1

After some experimentation, I managed to figure it out on my own

The solution involved setting a switch on a child element event and having the parent element filter events based on the switch

let isChildEntered

container.addEventListener('dragenter', (e) => {
    if (!isChildEntered) {
      console.log('dragenter')
  }
})

container.addEventListener('dragleave', (e) => {
  if (!isChildEntered) {
    console.log('dragleave')
  }
}, true)

inner.addEventListener('dragenter', e => {
    isChildEntered = true
})

inner.addEventListener('dragleave', e => {
    isChildEntered = false
})

Check out the demo here

Answer 2

After some experimentation, I managed to figure it out on my own

The solution involved setting a switch on a child element event and having the parent element filter events based on the switch

let isChildEntered

container.addEventListener('dragenter', (e) => {
    if (!isChildEntered) {
      console.log('dragenter')
  }
})

container.addEventListener('dragleave', (e) => {
  if (!isChildEntered) {
    console.log('dragleave')
  }
}, true)

inner.addEventListener('dragenter', e => {
    isChildEntered = true
})

inner.addEventListener('dragleave', e => {
    isChildEntered = false
})

Check out the demo here

How can the "dragenter" event be allowed to pass through child elements?

Answer №1

Similar questions

Create a custom React component using the CSS grid system

Transform a PDF document into a Google Doc utilizing the capabilities of the Google Drive API version 3

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

Save the uploaded file in Express to a custom directory on the system, avoiding the project's public folder

Is there a problem with using Nth-Child / Nth-Of-Type in CSS when classes are dynamically added or removed using jQuery?

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Utilizing Skeleton to create a cropped text button on an iPhone

React.js router - struggles to clean up unsightly query parameters in the URL

Utilize a custom attribute in Bootstrap 4 tooltips instead of the standard "title" attribute to define the text displayed in

Why isn't my JavaScript variable visible in the HTML code?

Display items according to the input provided in the form

Create a heading for the selection menu

Proper method for verifying line-clamp in a Vue component

Guide on setting up JSME, a chemistry portal integrated with JavaScript, within vuejs

What is the best way to implement momentJS globally in VueJS 2?

Having trouble establishing a connection between Node.js server and Google Directions API

Retrieving CSV information from several files within a JavaScript directory

Tips for sending information to a modal window

Node js does not support iteration for DirectoryFiles

Create a custom JQuery dropdown menu where the title can be changed and other options are easily