Html5 dragleave fired when hovering a child element

No-nonsense guide to handling event counter

Let's introduce a reference counter to keep tabs on dragenter and dragleave events:

// Open up the counter shop!
var dragCounter = 0;

parentElement.addEventListener('dragenter', function(event) {
  // Register every guest, Even Stevens style.
  dragCounter++;

  // Let's paint the town red!
  this.classList.add('red');

  // Because IE prefers to play a different game.
  event.preventDefault(); 
});

parentElement.addEventListener('dragleave', function(event) {
  // Remember to tell your guests goodbye!
  dragCounter--;

  // If all your guests have left, time to clean up!
  if (dragCounter === 0) {
    this.classList.remove('red');
  }
});

parentElement.addEventListener('drop', function(event) {
  // Reset the clock, it's a brand new day!
  dragCounter = 0; 

  // No more red, time to welcome the new!
  this.classList.remove('red');

  event.preventDefault();
});


Crossing the browser compatibility bridge

Analyze and ensure that your implementation is compatible across browsers. This means keeping an eye out for pointer-events functioning in Firefox especially. Here's a simplified example:

.child {
  // With great power comes none responsibility 
  pointer-events: none;
}


For environments where the feature isn't supported, a JavaScript-based fallback or providing a masking layer can serve as an alternative.

Your crash course on effective event handling

Treasuring relatedTarget

Hunt for event.relatedTarget as it offers a glimpse into where the cursor is planning its next visit. It's like a helpful guide pointing you in the right direction:

• If it's a family member (child element), the big alert isn't required.
• If the cursor decides to hop out of the boundary, only then trigger the real dragleave.

Master puppeteer technique: masking

Construct a mask within your playground, also known as the dropzone:

<div id="dropzone">
  // Always remember, not all heroes wear capes
  <div id="mask" class="overlay"></div> 
  <!-- Your content goes here -->
</div>


Attach dragleave and drop events to this hero mask, vanish it post events to return to normalcy:

// Even superheroes need a break
mask.addEventListener('dragleave', handleDragLeave);
mask.addEventListener('drop', handleDrop);


No feature left behind. Welcome, graceful degradation!

If your user's browser is short of the required features, ensure a graceful degradation with conditional logic to provide fallbacks or alternate interaction modes.