Javascript = AddEventlistener仅在Chrome上运行

时间:2018-12-15 11:54:23

标签: javascript addeventlistener

我想使用一个侦听器,当鼠标离开屏幕时,该侦听器将触发一个功能。我正在使用以下代码:

content = 'blabla';
document.addEventListener("mouseleave", function(){ display_exit(content);  });
function display_exit(content)
{ console.log(content); }

当我在Chrome上执行此代码时,它在Firefox或Explorer / Edge上也可以正常工作。

在我的语法中,Chrome是否可以容忍某些东西,而其他的不是?

谢谢

洛朗

2 个答案:

答案 0 :(得分:3)

该事件仅是specified for类型的Element个节点,而不是NodeDocuments的事件:

  

类型鼠标离开

     

...

     

受信任的目标元素

     

...

您可以将侦听器附加到documentElement,它将起作用:

document.documentElement.addEventListener("mouseout", ...);

此外,请确保文档(html元素)的高度为100%,否则,根据其内容可能甚至还没有进入document元素,因此不会触发请假。

请参见以下工作提琴:https://jsfiddle.net/b3wtoayq/

根据规范,我认为这是Chrome中的错误,允许将事件监听器附加到文档本身。

答案 1 :(得分:2)

“ mouseleave”事件由Element对象触发,并且不会冒泡。文档(document不是Element,因此由于上述两个因素的结合,将事件侦听器附加到文档上没有任何作用。

这与Firefox无关。它是由Web标准组织W3C在这种情况下提议设计的。如果有的话,Firefox会遵守该规范,显然这是关于Chrome不能说的。

在使用它之前,请始终咨询所用技术的权威参考,并质疑自己认为是错误的行为:UI Events, W3C Working Draft(其中MDN用作来源)

您的解决方案是修改代码,考虑是否可以使用"mouseout" event instead, which does bubble,还是将事件侦听器附加到要侦听“多声”事件的元素上,包括{ {1}}元素(如果适用)。