开发者

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.)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜