JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div style="padding:10px;border: 1px solid blue" id="parent">
 <p>Move the mouse in and outside of here. The blue box parent has <i>many</i> other <b>elements</b> inside.</p>
 <p>They do not generate extra `mouseover/mouseout` events.</p>
</div>
event

CSS

fieldset{
    border:1px solid #aaa;
    margin:10px;
    padding:5px;
}

JavaScript

function isOutside(evt, parent) {
  var elem = evt.relatedTarget || evt.toElement || evt.fromElement

  while ( elem && elem !== parent) {
    elem = elem.parentNode;
  }

  if ( elem !== parent) {
    return true
  }
}

var parent = document.getElementById('parent')

parent.onmouseover = parent.onmouseout = function(e) {
  e = e || event
  
  if (isOutside(e, this)) {
    parent.nextSibling.nodeValue = new Date() + ' ' + e.type 
  } 
}