Detect when a dragged item is dragged out of the window. document.ondragleave()?

Question

I'm trying to detect when a HTML element is dragged out of the document and off of the window. However, the dragleave event bubbles up, so document.documentElement.ondragleave gets triggered with every element that the drag leaves in its path to the edge of the page. It also appears that the last element that triggers dragleave is the sub element that borders the page, and not the document itself.

Does anyone have any idea how to solve this?

By contrast, mouseleave

document.documentElement.addEventListener('mouseleave', (e) => {console.log(e)})

works great and does exactly what I need.

but

document.documentElement.addEventListener('dragleave', (e) => {console.log(e)})

gets triggered for every sub-element… and never triggers for the documentElement itself.

What am I missing?

Answer 1

document.addEventListener('dragleave', (e) => {console.log(e)})