JavaScript事件处理程序

我正在尝试修复mouseenter和mouseleave处理程序的错误。JavaScript事件处理程序

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

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

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

对此有任何修复？

只有简单的JavaScript解决方案，请（没有第三方库）。

来源

2014-02-23 user3330630

当您在对象上快速移动鼠标时，它应该会闪烁，因为您首先会获得一个mouseenter，然后是一个mouseleave。你期望发生什么？ – jfriend00

在任何情况下，你都应该在CSS中用'：hover'来做这个。 –

Javascript中的指针只是“悬停”最顶端（可见）元素。

这意味着如果你已经说了一个背景div，并且“输入”它时你会在其上显示另一个div，光标将退出背景以输入新的div。

也许你可以设置不透明度为0，而不是隐藏div，并保持它始终“可见”（也将事件处理程序放在出现的div中，而不是在后台中）。

来源

2014-02-23 18:19:11 6502

这是一个便宜的方式来解决问题，而不是我检查父母的名单，如果父母是我的元素的事件没有触发。请注意，不透明度在早期版本的IE中会出现问题。 – user3330630

@ user3330630：我很早就停止关注IE作者有意打破互联网并将用户链接到他们的非标准解决方案。 – 6502

那是因为你不是真正的开发者。对你有一个stackoverflow帐户感到羞耻。 – user3330630

在鼠标事件中有一个名为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);

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

我知道这似乎有点奇怪，但它是这样，有时当它进入子节点区域mouseleave被触发。

来源

2014-02-23 18:28:14

@cookiemonster：我更新了我的答案，以澄清这个奇怪的情况。 –

对不起，我已经找到了一个解决方案，我会发布它，当我获得10声望。我不会忘记。 – user3330630

JavaScript事件处理程序

回答

相关问题