1

我正在尝试使用 mouseenter 和 mouseleave 处理程序修复错误。

listener.addEventListener('mouseenter', function(){
    element.style.visibility = "visible";
}, true);

listener.addEventListener('mouseleave', function(){
    element.style.visibility = "hidden";
}, true);

这些事件按预期工作，除了当我将鼠标移动到它闪烁鼠标离开事件的元素上时。

对此有任何修复吗？

请仅使用纯 javascript 解决方案（无 3rd 方库）。

4

2 回答 2

0

Javascript 中的指针只是“悬停”在最上面（可见）的元素。

这意味着如果你说一个背景 div 并且当“进入”它时你会在它上面显示另一个 div 光标将退出背景进入新的 div。

可能您可以将不透明度设置为0而不是隐藏 div 并使其始终“可见”（也将事件处理程序放置在出现的 div 中，而不是在背景中）。

于 2014-02-23T18:19:11.917 回答
0

鼠标事件中有一个名为relatedTarget的属性，可以帮助您修复它。您应该检查它是否不在以下区域：

listener.addEventListener('mouseleave', function(event){
    if(!event.relatedTarget ||
       (event.relatedTarget != listener && event.relatedTarget.parentNode != listener))
        element.style.visibility = "visible";
    else
        alert("I am still in listener area but mouseleave got triggered :)))");
}, true);

这里的重点是我只检查了第一个父级别，但您最好创建一个函数来检查listener节点中的所有 DOM 树。我的意思是它可能是节点中嵌套的 childNode 之一listener。

我知道这看起来有点奇怪，但它就是这样，有时当它进入子节点区域mouseleave时会被触发。

于 2014-02-23T18:28:14.897 回答