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 docs}和mouseleave ^{W3 DOM3 docs}但它们目前位于DOM3 Events working draft。

它们是由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/（打开日志消息控制台）

MouseOver / MouseOut EventListener继承到子节点？

1 个答案: