JavaScript：JavaScript 中的 mouseenter 事件？答案

【问题标题】：JavaScript: mouseenter event in JavaScript?JavaScript：JavaScript 中的 mouseenter 事件？
【发布时间】：2013-05-23 12:24:40
【问题描述】：

javascript中是否有鼠标输入事件（请只使用javascript，不要使用jquery）？

当我这样做时，它没有响应。

window.onload = initAll;
function initAll(){
    if(window.addEventListener){
        document.getElementById('container').addEventListener( 'mouseenter', freeze , false);
    }
}

function freeze(){
    console.log("mouse entered")    
}

有人可以解释一下'mouseenter'和'mouseover'之间的区别吗？ 'mouseover' 是 'mouseenter' 的替代品吗？

帮助赞赏！

【问题讨论】：

MDN Docs, great place to learn: mouseenter
stackoverflow.com/a/1104403/1053938
stackoverflow.com/questions/6130737/mouseenter-without-jquery
哦，真的吗？我认为我们不需要那里的括号，伙计！
大多数情况下，您可以通过将此代码放入您的mouseover 处理程序中来模拟IE 的mouseenter...if (this !== event.target) { return } 这并不涵盖所有情况。我认为可以很容易地实现完全修复，但我不记得我的头顶到底是怎么回事。

标签： javascript mouseevent mouseover mouseenter

【解决方案1】：

不要理会onmouseenter，因为this page 声明它特定于IE。

...当鼠标进入元素的边界时，onmouseenter 和 onmouseover 都会触发。但是，如果鼠标进入第一个元素中的子元素，onmouseenter 不会再次触发（不会冒泡）。

试试这个onmouseover：

yourObject.onmouseover=function()
    {
        //SomeJavaScriptCode
    };

查看this page 了解有关 javascript 鼠标事件的一些有用信息。

【讨论】：

那么，有没有办法在其他浏览器中使用'mouseenter'？
显然不是根据那个帖子。无论如何，我通常使用onmouseover。不过，根据我的第一个链接中的第一个答案，如果您使用的是 jQuery，则可以使用 onmouseenter。 api.jquery.com/mouseenter/…
该页面显示“Firefox 在版本 10（2012 年 1 月）开始支持 onmouseenter，Chrome 在版本 30（2013 年 10 月）开始支持它”

【解决方案2】：

当然，Mouseover 是 mouseenter 的替代品。它为正在访问的任何 dom 元素提供 UI 控制。参考this以获得进一步的解释 http://dean.edwards.name/weblog/2005/10/add-event/ mouseenter without JQuery

【讨论】：

但是鼠标悬停在一次又一次地触发？如何预防？
你可以为此编写一个处理程序
@RachelGallen 我不确定你在说什么......你能给我一些课程/教程链接吗？
基本上你同时编写了一个 onmouseout ... 来否定 onmouseover
@RachelGallen 谢谢.. 它帮助了

【解决方案3】：

如果您使用 jQuery，请使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout。

如果您以上面的示例为例，边框内的所有内容都是一个元素，让我们将左边的那个带有“名称”一词的元素称为#A。 mouseenter 只会在将鼠标移到边框#A 内时触发。另一方面，mouseover 将在您进入边框时触发，当您将鼠标移过“1”后面的灰色背景时，以及当您将鼠标移到单词“名称”上时再次触发。如果您希望事件触发一次，请使用mouseenter。

【讨论】：

【解决方案4】：

鼠标悬停在您将鼠标悬停在某物上时使用。单击鼠标时将使用鼠标输入（或鼠标按下）。可以找到完整的 JavaScript 事件列表 here

【讨论】：

如果您阅读了您发布的链接上的内容，您会发现 mouseenter 与点击无关