JavaScript：JavaScript中的mouseenter事件是什么？

Question

JavaScript：JavaScript中的mouseenter事件是什么？

4

在 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”的替代品？

感谢帮助！

- Navneet Saini

MDN文档，一个学习的好地方：mouseenter。https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter - epascarello

https://dev59.com/pnNA5IYBdhLWcg3wEZeT#1104403 - jonhopkins

https://dev59.com/5m025IYBdhLWcg3wPzXL - Rachel Gallen

1

哦，真的吗？我觉得我们不需要那里的括号，伙计！ - Navneet Saini

1

大多数情况下，您可以通过将此代码放入鼠标悬停处理程序中来模拟IE的“mouseenter”... if (this！== event.target) {return} 这并不涵盖所有情况。我认为可以很容易地实现完整的修复，但我不记得具体是如何做的。 - user1106925

显示剩余2条评论

4个回答

0

无疑地，Mouseover 是 mouseenter 的替代方案。它将 UI 控制权交给正在访问的 DOM 元素。请参阅以下内容以获得更详细的解释 http://dean.edwards.name/weblog/2005/10/add-event/ 没有 JQuery 的 mouseenter

- aakashkrgoel

但是鼠标悬停事件一直在不断触发，如何防止这种情况发生？ - Navneet Saini

你可以为此编写一个处理程序。 - Rachel Gallen

@RachelGallen 我不确定你在说什么。你能给我一些教程链接吗？ - Navneet Saini

基本上，您可以同时编写一个onmouseout来抵消onmouseover。 - Rachel Gallen

让我们在聊天室中继续这个讨论。 - Navneet Saini

0

如果您使用jQuery，请使用mouseenter和mouseleave代替mouseover和mouseout。

enter image description here

如果您看上面的例子，边框内的所有内容都是一个元素，我们称左侧带有“名称”一词的元素为＃A。mouseenter仅在将鼠标移动到边框＃A内时触发。另一方面，mouseover将在您进入边框时触发，再次在您将鼠标移过“1”后面的灰色背景时触发，并在您将鼠标移到“名称”一词上时再次触发。如果您希望事件仅触发一次，请使用mouseenter。

- Luke Madhanga

-2

当您只是悬停在某物上时，使用Mouse over。当鼠标被点击时，应使用Mouse enter（或mousedown）。完整的javascript事件列表可以在这里找到。

- Rachel Gallen

3

如果你阅读你所贴链接中的内容，你会发现 mouseenter 与点击没有任何关系。 - Rob Johnstone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gwin003 · Accepted Answer

不要使用onmouseenter，因为这个页面指出它只适用于IE浏览器。

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

尝试使用onmouseover：

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

请查看此页面，了解有关JavaScript鼠标事件的一些好信息。