MouseOver/MouseOut EventListener继承到子节点

MouseOver/MouseOut EventListener inheriting to child nodes?

本文关键字：子节点 继承 EventListener MouseOut MouseOver      更新时间：2023-09-26

编辑：解决方案

感谢Gaby帮助我们找到解决方案！并没有完全按照我想要的方式工作，根据答案找到了一个更好的解决方案。我所做的只是在两个元素(目标和相关目标(不共享父元素时执行mouseover/mouseout函数。

只是稍微修改了加布的例子，让一切都很好。只要你的弹出窗口与产生它的内容在同一个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;
}

解决了我的问题——好吧，因为我想为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

可以说，我可以让孩子们对活动"透明"吗？

有两个事件处理这种情况。

mouseenterW3 DOM3文档和mouseleaveW3 DOM3文件，但它们目前处于DOM3事件工作草案中。

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

如果新鼠标悬停的元素是顶级元素的子元素，则可以手动检查并取消处理程序的执行。。

代码改编自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/(打开控制台查看日志消息(

相关文章：