Question

have a menu item which displays a modal div. wish the created div to close automatically whenever the user moves his cursor out of it, but when the modal div is created originally the cursor is out of it, so the cursor first needs to move inside of it.

when I log to the console the onmouseout trigger being fired, where both e.target and e.currentTarget are the div itself, the event fires twice, first on entering the div and then on leaving the div.

first, this does not make sense to me – why is the happening? second, is there is a standard logic to use here?

---

all html is generated
here is some code which creates the modal and attached the mouseout trigger

// code creates the modal div from the menu
get:    function( e ) {
        util.popup( E.h4( "Maintenance Menu:" ),
           E.ul(  E.a( '#', maintenance.users, 'Users (Logins)' ),
                  E.a( '#', maintenance.employees, 'Employees' ),
                  E.a( '#', maintenance.skills, 'Skill Types' ),
                  E.a( '#', maintenance.etps, 'Expense Types' ),
                  E.a( '#', maintenance.menus, 'Menu Items' ) ),
            E.div(  E.button( maintenance.done, "s.width:90%", "Finished" ) ) );
         util.popup_dom().addEventListener( 'mouseout',util.popout() );
        },

popup() creates the modal and places it in BODY, popout() removes it.

---

solution (as per first answer – thanks!) using mouseover to set mouseout:

:
util.popup(...);
var outSet = false;  // whether mouseout trigger has been set
util.popup_dom().addEventListener( 'mouseover',function(e) {
   if( !outSet ) {
      setTimeout( function() { 
         util.popup_dom().addEventListener('mouseout',function(e){util.popout();} ),
         200 );
      outSet = true;
    }
} );

Answer 1

You could only register the onmouseout listener onmouseover:

var closeModalDiv = function () { ... };

addEventListener(modalDiv, 'mouseover', function () {
    addEventListener(modalDiv, 'mouseout', closeModalDiv);
});

(This assumes you’re using a custom, cross-browser event method named addEventListener; you’ll have to adjust this to however it is you’re registering events.)