正文 

当前位置： 首页 > 源码 >

如何在 Javascript 中移动子元素时触发一次鼠标事件？

     2023-02-22     281

关键词：

【中文标题】如何在 Javascript 中移动子元素时触发一次鼠标事件？【英文标题】：How to fire mouse event once for moving over child elements in Javascript? 【发布时间】：2012-06-27 11:54:41 【问题描述】：

当输入一个 DOM 元素时，mouseover 事件将会发生。在当前元素周围移动鼠标时，不会发生任何事件，因为mouseover 用于输入。

但是，子节点不遵守此规则。如果将鼠标移到子节点上，mouseover 事件将一次又一次地触发，虽然没有新的事件，因为我们仍然在原来的父节点中。

看到这个example。如果我们将鼠标移到父元素上（实际上是在它的 textNode 上），没有任何新的事情发生，但是如果我们转到子元素（仍然在父元素上），它将一次又一次地触发 mouseover 事件。事实上，它会在鼠标每次进入元素时触发鼠标事件（即使在原始父元素内）。

我们如何使mouseover 只移动一次以在整个父级（addEventListener 中的原始元素）上移动？在给定的示例中，我的意思是避免在子元素上移动鼠标时触发事件。

【问题讨论】：

【参考方案1】：

这在 chrome 和 ff 中对我有用

document.getElementById("parent").addEventListener('mouseover', function(event) 
    var e = event.fromElement || event.relatedTarget;
    if (e.parentNode == this || e == this) 
        return;
    
    document.getElementById("time").innerHTML = new Date();
, true);

Fiddle Demo

参考：Mouse Events

【讨论】：

【参考方案2】：

您真正需要的是mouseenter 事件，它不会冒泡（与mouseover 不同）。来自 MDN：

同步 mouseenter DOM 事件在鼠标或 另一个指点设备进入分配给元素的物理空间 或其后代之一。

与 mouseover 类似，不同之处在于 不会冒泡 和 当指针从其后代之一移动时不会发送它 物理空间到它自己的物理空间。

不幸的是，它是not widely supported。一种解决方案是使用 jQuery（参见 .mouseenter()），它在它支持的所有浏览器中填充该事件。另一种选择是检查触发事件的元素：

document.getElementById("parent").addEventListener('mouseover', function(e) 
    if (e.target.id === "parent")  //Only execute following on parent mouseover
        document.getElementById("time").innerHTML = new Date;
        this.childNodes[1].style.display="block";
    
, false);

或see here 乍一看是一个相当不错的垫片。

【讨论】：

mouseenter 事件只针对 IE，我说的是纯 JS，不是 jQuery 框架。 @Ali - mouseenter 实际上在规范中，现在在 Firefox、IE 和 Opera 中得到支持。希望其他浏览器能尽快赶上。 但它仍然很快被用作流行事件，大多数用户（包括我）使用webkit浏览器。 @Ali - 同意，我也使用 WebKit 浏览器。我已经通过链接更新了我的答案，该链接指向一篇似乎有很好垫片的文章。我建议尝试一下。【参考方案3】：

在您的示例中，子元素没有触发任何事件，它是您的父元素，当您将鼠标悬停在其上时，它会运行您的脚本并在您的“时间”div 中显示结果。

【讨论】：

进入子元素会触发事件，因为我们还没有离开父元素。 @Ali 但脚本在 id 基础上运行。

阻止 Javascript 事件影响子元素

】阻止Javascript事件影响子元素【英文标题】：StopJavascripteventfromaffectingchildelements【发布时间】：2012-08-1602:47:23【问题描述】：我有一个创建元素的脚本，创建过程的一部分是添加一个onclick事件（使用addEventListener），但是当我点... 查看详情

如何禁用由子元素触发的 mouseout 事件？

】如何禁用由子元素触发的mouseout事件？【英文标题】：Howtodisablemouseouteventstriggeredbychildelements?【发布时间】：2010-09-2522:11:07【问题描述】：让我详细描述一下这个问题：当鼠标悬停在一个元素上时，我想显示一个绝对定位的div... 查看详情

javascript---鼠标事件

1、基本鼠标事件：mouseenter：当鼠标移入某元素时触发。mouseleave：当鼠标移出某元素时触发。mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会... 查看详情

javascript中ondragover是啥事件

...技术A在元素正在拖动到放置目标时触发HTML中：尝试一下JavaScript中：object.ondragover=function()myScript;尝试一下Java 查看详情

jq在iframe中点击按钮,父元素触发事件

...现　方法如下：　　当在段落上按下鼠标按钮时执行一段JavaScript：　　<ponmousedown="mouseDown()">请点击此文本！</p>　　定义和用法　　onmousedown属性在鼠标按钮在元素上按下时触发。　　提示：相对于onmousedown事件... 查看详情

js中鼠标移动事件触发时,如何获得当前鼠标在哪一个元素上

..."><head><title></title><scripttype="text/javascript">functioninit()document.body.onmousemove=function(e)if(!e)e=window.event;elsee.srcElement=e.target;document.getElementById("divDebug").innerHTML="mousemove("+e.clientX+","+e.cl... 查看详情

mouseover和mouseout事件在鼠标经过子元素时也会触发

JavaScript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，经过绑定元素时会多次触发mouseover和mouseout事件。jQuery解决办法:jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout不过有个mo... 查看详情

事件与事件流

一、什么是事件与事件流　　1、众所周知，HTML与JavaScript的交互是由事件驱动的，我们定义在某个时刻调用某个事件来完成页面的交互。HTML页面就是一个DOM树，当一个元素调用　　　 一个事件时，该事件会在结点与结点之... 查看详情

拖动子元素时触发 Svelte 可拖动，onleave 事件

】拖动子元素时触发Svelte可拖动，onleave事件【英文标题】：Sveltedraggable,onleaveeventtriggeredwhendraggingoverchildelements【发布时间】：2021-06-1803:45:03【问题描述】：我有一个元素，当我使用dragenter事件在其上拖动第二个元素时突出显示... 查看详情

在 Div 中添加子元素时，虽然使用 UseEffect 触发，但到达 useRef() 当前属性返回未知

】在Div中添加子元素时，虽然使用UseEffect触发，但到达useRef()当前属性返回未知【英文标题】：ReachuseRef()CurrentpropertyreturnunidentifiedthoughusingUseEffecttofirewhenaddingachildelementinsideaDiv【发布时间】：2021-10-1713:38:34【问题描述】：我是反... 查看详情

如何使用 JavaScript 将所有 HTML 元素子元素移动到另一个父元素？

】如何使用JavaScript将所有HTML元素子元素移动到另一个父元素？【英文标题】：HowtomoveallHTMLelementchildrentoanotherparentusingJavaScript?【发布时间】：2014-01-2112:09:18【问题描述】：想象一下：<divid="old-parent"><span>Foo</span><b... 查看详情

如何在javascript中更新子数组元素

我试图在javascript中更新嵌套的数组元素。想要将日期转换为不同的格式。我如何更新嵌套元素array1=[{"week":["2019-05-06T16:00:00.000Z","2019-05-07T16:00:00.000Z","2019-05-08T16:00:00.000Z","2019-05-09T16:00:00.000Z","2019-05-10T16:00:00.000Z", 查看详情

每日分享！javascript的鼠标事件（11个事件）(代码片段)

鼠标的11个事件具体的事件解释如下：click：按下鼠标（通常是按下主按钮）时触发。dblclick：在同一个元素上双击鼠标时触发。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：当鼠标在一个节点内部移... 查看详情

如何获取 javascript/jQuery 中最高子元素的高度？

】如何获取javascript/jQuery中最高子元素的高度？【英文标题】：Howtogetheightofthehighestchildrenelementinjavascript/jQuery?【发布时间】：2010-11-0718:06:26【问题描述】：我需要一个函数来获取div内最高元素的高度。我有一个包含许多其他元素... 查看详情

如何将事件绑定到元素和所有子元素但只触发一次？

】如何将事件绑定到元素和所有子元素但只触发一次？【英文标题】：Howtobindeventtoelementandallchildrenbutonlyevertriggeritonce?【发布时间】：2015-04-2206:29:25【问题描述】：这就是HTML的样子：<ahref="#"id="back-button"data-transition="slide"data-dir... 查看详情

浏览器关闭时如何触发jQuery [重复]

...【发布时间】：2012-01-0803:49:51【问题描述】：可能重复：javascriptdetectbrowserclosetab/closebrowser有人知道在javascript/jQuery中监听窗口关闭事件的可靠方法吗？窗口是父实例，而不是任何子实例。IE。如果一 查看详情

移动端touchstartouchmovetouchend事件如果页面有滚动时不让触发touchend事件。

...素，则取消后续事件监听函数的执行。*/<scripttype="text/javascript">functionmakeTouchable 查看详情

事件类型——鼠标事件(代码片段)

...上click=mousedown+mouseup）mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡，而且移动到后代元素上不触发。DOM3级事件。（IE、Firefox、Opera）mouseleave：位于元素上方的鼠标光标移动到元素范围之外的时... 查看详情