MouseOver/MouseOut EventListener继承到子节点？

Question

编辑:解决方案

感谢Gaby寻求解决方案的帮助!没有完全按照我想要的方式工作,从答案中找到了更好的解决方案.我所做的只是当两个元素(目标和相关目标)不共享父元素时才执行鼠标悬停/鼠标悬停功能.

刚刚修改了Gaby的例子,让一切都运转良好.只要你的弹出窗口在同一个div元素内,就像它产生它一样(即使它在主要内容之外,你可以附加溢出可见)并且你不会在去往它的途中进入非共享元素,它我会活着.

divContents.addEventListener('mouseover', mouseEnter(showPopup, divContents));
divContents.addEventListener('mouseout', mouseEnter(hidePopup, divContents));

现在,修改后的mouseEnter ...

function mouseEnter(_fn, _parent) {
    return function(_evt) {
        if(!shareParent(_evt.target, _evt.relatedTarget, _parent)) {
            _fn.call(this, _evt);  
        }
    }
};

function shareParent(_object1, _object2, _parent) {
    if (_object1 === _object2) { 
        return true;
    }
    while (_object1 && _object1 !== _parent) {
        _object1 = _object1.parentNode;
    }
    while (_object2 && _object2 !== _parent) {
        _object2 = _object2.parentNode;
    }

    return _object1 === _object2;
}

解决了我的问题A-OK,因为我想为mouseover和mouseout事件触发的内容只会在元素不共享父元素时发生 - 无论如何我都打算如何显示弹出窗口.

再次感谢Gaby的代码示例!

注意:在shareParent函数中没有检查父有效性的错误,没有检查但是当它到达树的顶部时它应该总是返回true(假设_parent实际上不是_object1或_object2的父级).因此,请确保传递给它的父对象有效.

原始问题:

我现在在JavaScript中遇到问题.

我正在尝试创建一个div元素,当鼠标悬停时,它会动态弹出.div直接与生成它的对象相邻创建.

divCreator.addEventListener('mouseover', createPopup, true);
divCreator.addEventListener('mouseout', hidePopup, true);

这会创建弹出窗口.现在,在弹出窗口中,当我创建它时,我会在将其附加到文档之前运行它:

divPopup.addEventListener('mouseover', createPopup, true);
divPopup.addEventListener('mouseout', hidePopup, true);

这样可以确保如果我将鼠标悬停在弹出窗口上,它会使其保持活动状态(因为divCreator mouseout将会触发),当我弹出该弹出窗口时,它会消失.

但是,使用此方法,每当我鼠标悬停子元素时,它会从父元素(divPopup)检测到mouseout事件并关闭div.

我可以让孩子们对事件"透明",可以这么说吗？

Answer 1

处理此案例有两个事件.

在mouseenter ^{W3 DOM3文档}和mouseleave ^{W3 DOM3文档},但他们目前都在DOM3事件工作草案.

它们是由Microsoft IE5.5引入的,Firefox在v10中增加了支持.

解决方法是,如果新的moused-over元素是顶级元素的子元素,则手动检查并取消处理程序的执行.

代码改编自 http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/

divCreator.addEventListener('mouseover', mouseEnter(createPopup), true);
divCreator.addEventListener('mouseout', mouseEnter(hidePopup), true);


function mouseEnter(_fn)
{
   return function(_evt)
   {
      var relTarget = _evt.relatedTarget;
      if (this === relTarget || isAChildOf(this, relTarget))
         { return; }

      _fn.call(this, _evt);
   }
};

function isAChildOf(_parent, _child)
{
   if (_parent === _child) { return false; }
      while (_child && _child !== _parent)
   { _child = _child.parentNode; }

   return _child === _parent;
}

在 http://jsfiddle.net/gaby/jMvHv/进行演示(打开日志消息的控制台)