小编kwh*_*kwh的帖子

编辑:解决方案

感谢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直接与生成它的对象相邻创建. …