JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="width: 150px; height: 150px; background:yellow;">
    <div id="inner" style="margin: auto; width: 50px; height: 50px; background:black;"> 
    </div> 
</div> 



<div id="console" style="font:consolas">
    
</div>

JavaScript

//event triggers 
      $('#inner').bind('mousemove', function(e) { 
        $(this).parent()
                .trigger('hover', [e.offsetX])
                .trigger('dblclick', [e.offsetX])
      });
    
      //event handlers
      $('#container').bind('hover', function (e, v) {
        console.log('hover: ' + v);
          $('#console').prepend('<pre>hover :' + v + '</pre>');
        
      });
      $('#container').bind('dblclick', function (e, v) {
        console.log('dblclick: ' + v);
        $('#console').prepend('<pre>dblclick:' + v + '</pre>');          
      });