Question

有一个显示模态div的菜单项。希望创建的div在用户移动光标 out 时自动关闭，但是当最初创建模态div时，光标是，所以光标首先需要移动它。

当我登录到控制台时，onmouseout触发器被触发，其中e.target和e.currentTarget都是div本身，事件触发两次，首先在输入 div，然后在离开 div。

首先，这对我没有意义 - 为什么会发生？第二，这里有一个标准逻辑吗？

<小时/> 生成所有html 这里有一些代码可以创建模态并附加mouseout触发器

// 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()创建模态并将其置于BODY中，popout()将其移除。

解决方案（根据第一个答案 - 谢谢！）使用mouseover设置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

您只能注册onmouseout听众onmouseover：

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

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

（这假设您使用的是名为addEventListener的自定义跨浏览器事件方法;您必须对此进行调整，但是您正在注册事件。）

在javascript onmouseout中，如果光标在块外？如何工作？

1 个答案: