in javascript onmouseout, how to make work if cursor outside block?
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 itse开发者_开发技巧lf, 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; } } );
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.)
精彩评论