为什么单击子元素时会触发鼠标离开

当单击子元素时会触发鼠标离开的原因是，鼠标事件在DOM中按照事件冒泡的方式进行传播。事件冒泡是指当一个元素上的事件被触发时，该事件会向父元素传播，直到传播到文档根节点。

在HTML中，子元素嵌套在父元素中，当我们单击子元素时，首先会触发子元素上的鼠标点击事件。然后，该事件会向父元素传播，依次触发父元素的鼠标点击事件，直到传播到文档根节点。

在这个传播过程中，当鼠标从子元素移动到父元素时，会触发鼠标离开事件。这是因为鼠标离开事件是在鼠标移出一个元素的边界时触发的，而在子元素上单击后，鼠标会从子元素移动到父元素上，因此会触发鼠标离开事件。

这种行为可以在前端开发中用于实现一些交互效果，例如当鼠标移出一个元素时隐藏某个子元素，或者在鼠标离开时改变元素的样式等。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。产品介绍链接
腾讯云云数据库MySQL版：高性能、可扩展的关系型数据库服务。产品介绍链接
腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务。产品介绍链接
腾讯云人工智能平台（AI Lab）：提供丰富的人工智能算法和工具，帮助开发者构建智能应用。产品介绍链接
腾讯云物联网套件（IoT Hub）：提供全面的物联网解决方案，支持海量设备接入和数据管理。产品介绍链接

相关·内容

JavaScript 事件

source=cloudtencent 鼠标事件鼠标单击事件 click 在文档中鼠标进行单击，就会触发事件。...var i = 0 document.addEventListener('mousemove', function () { console.log(i++) }) 0 鼠标触碰子元素/离开子元素.../离开元素事件 mouseout 鼠标光标移出文档内时会触发事件。...var i = 0 document.addEventListener('mouseout', function () { console.log(i++) }) 0 鼠标触碰子元素/离开子元素.../触碰元素事件 mouseover 鼠标光标移入文档内时会触发事件。

7002 0

jquery 绑定事件 - submit() 用户递交表单

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...为什么需要触发这个submit()事件呢？...原因就是很多时候表单的提交并不能使用原生的submit按钮直接提交表单，而是需要触发一个事件，在这个事件处理验证完毕数据，最后在使用ajax进行异步提交处理较好。...禁用原生的submit事件注意：该事件只适用于元素。 submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。 ?

2.2K3 0

jQuery事件

常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready...$button = $('#button1') var $text = $("#text1"); var $div = $("#div1") // 鼠标点击...$text.blur(function(){ $(this).css({'background':'white'}); }); // 鼠标进入...div.mouseover(function(){ $(this).css({'background':'gold'}); }); // 鼠标离开...小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发

31.8K8 5

jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...mouseout() 鼠标离开（离开子元素也触发）上面看了mouseover() 是鼠标进入的事件，那么下面来看看这个事件离开的事件。 ? ?...果然，这个子元素也是会触发mouseout()事件的。 mouseenter() 鼠标进入（进入子元素不触发）上面两个事件都是具备事件冒泡的特性，看看这个有没有，如下： ? ?...mouseleave() 鼠标离开（离开子元素不触发）相信这个mouseleave()也是一样的特性，跟mouseenter()差不多才对，下面来看看。 ? ?

2.9K3 0

jquery 绑定事件 bind() unbind() 以及事件函数列表

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...从这里可以看出，只能触发一次click事件。因为已经解除绑定了。同时绑定两个事件 click mouseover ? 两个事件都可以触发打印日志。那么解绑是不是也一样可以写多个的呢？ ?

1.6K2 0

jquery 绑定事件 - resize() 浏览器窗口的大小发生改变

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 resize() 浏览器窗口的大小发生改变其实大部分resize()方法是用于响应式布局调整屏幕大小的时候进行触发处理的...这里就不写那么复杂的事情，只写一下当浏览器窗口变化的时候，触发resize()事件看看。

2.5K2 0

jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...focus() 元素获得焦点首先先来这个focus()函数。 ? 可以看到当获取焦点的时候，就立即弹出alert()。...blur() 元素失去焦点使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用，如下： ? 当获取到文本框内的值之后，就可以对其进行正则验证或者其他方式的校验。

12.3K3 0

第79天：jQuery事件总结（二）

解析如下：　　mouseover与mouseenter 　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。　　...只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。　　mouseout与mouseleave 　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。　　...只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。　　....); toggle()方法用于模拟鼠标连续单击事件。每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。　　...那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。

1.6K2 0

jQuery：详解jQuery中的事件（二）

解析如下：　　mouseover与mouseenter 　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。　　...只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。　　mouseout与mouseleave 　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。　　...只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。　　....); 　　toggle()方法用于模拟鼠标连续单击事件。每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。　　...那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。

2.2K3 0

JQuery事件处理

//鼠标停留显示隐藏内容，离开触发第二个函数隐藏内容 /*$(function(){ $(“a”).hover(function(){ $(this).next().show(); },function...(){ alert(“子元素事件被激活”); }); });*/ //单击b包含的内容会激活两个事件，这样怎么才能解决？...){ alert(“子元素事件被激活”); event.stopPropagation();//增加这句就阻止了事件冒泡，不过ie貌似不支持，当然可以增加一句return false;来解决 }); }...span> 多个事件多个事件隐藏 //很多事件都是有用户单击或者鼠标划过来触发的...，可是刚打开的页面我们有没有办法直接触发呢？

2.8K5 0

DOM事件

改变事件（change）：当表单元素的值改变时触发（通常用于输入框、下拉框等）。鼠标移入/移出事件（mouseover/mouseout）：当鼠标移入或移出元素时触发。...} 单击（移动端：300ms内没触发第二次，所以click在移动端有300ms延迟）；点击（PC端）元素.oncontextmenu=function(){}右键点击元素.ondblclick=function...(){} 双击，大约300ms内连续点击两次元素.onmouseenter=function(){}鼠标移入，进入子节点不会触发这个事件元素.onmouseleave=function(){}鼠标离开，...进入子节点不会触发这个事件元素.onmouseout=function(){}鼠标滑出，进入子节点会触发这个事件元素onmouseover=function(){}鼠标滑过，进入子节点会触发这个事件元素....onmousemove=function(){}鼠标滑动，只要鼠标动就会触发元素.onmousedown=function(){}鼠标按下元素.onmouseup=function(){}鼠标抬起元素

1682 0

web前端常见面试题

因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。 addEventListener 函数的第三个参数是个布尔值。...比如： blur 元素失去焦点时触发，focusout 事件也是失去焦点时触发，但可以冒泡； focus 元素获取焦点时触发； mouseenter 鼠标移动到元素上时会触发该事件，与之对应的是 mouseover...事件，但会冒泡； mouseleave 鼠标离开元素时触发，与之对应的是 mouseout，但会冒泡；事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。...，也可能指向它的子元素。

2.3K2 0

JQuery

.children()选择元素的所有子元素括号里面放具体的哪一个子集。...***事件属性 click() 鼠标单击 ready() DOM加载完成 blur() 元素失去焦点 focus()元素获得焦点 submit()用户提交表单 hover()同时为mouseenter...和mouseleave事件指定处理函数 mouseover()鼠标进入（进入子元素也触发） mouseout()鼠标离开（离开子元素也触发） mouseenter()鼠标进入（进入子元素不触发） mouseleave...()鼠标离开（离开子元素不触发）上面的这些鼠标移入和离开，触发和不触发指的是不再次触发父级。...验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。 <!

7.7K2 0

js 鼠标事件总结

当监听鼠标事件时，会触发一些事件，我们可以与之交互： mousedown 按下鼠标按钮触发 mouseup 鼠标按钮被释放 click 点击事件 dblclick 双击事件 mousemove 当鼠标移动到元素上时...，鼠标移动 mouseover 当鼠标移动到一个元素或它的一个子元素上时，鼠标悬停。...mouseenter 当鼠标移动到一个元素上时，鼠标进入。类似于mouseover但不冒泡。 mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。...小心使用mousemove，因为它在鼠标移动时多次触发。我们需要应用节流，这是我们在分析滚动时会详细讨论的东西。在事件处理程序中，我们可以访问很多事件属性。...button 如果有按钮，则为鼠标事件触发时按下的按钮数目(通常为0 =主按钮，1 =中按钮，2 =右按钮)。处理由单击按钮引起的事件(例如单击)。

9.1K4 0

5、React组件事件详解

，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。...onMouseOut onMouseOver事件：不论鼠标指针穿过被选元素或其子元素，都会触发。...ReactEvent 通过设置原生事件绑定为冒泡阶段调用，且每次测试单击子元素按钮：在子元素原生事件程序中阻止事件传播，则打印出：子元素原生事件绑定事件触发；在父元素元素事件程序中阻止事件传播...子元素React合成事件绑定事件触发在父元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发子元素React合成事件绑定事件触发...父组件React合成事件绑定事件触发可以看到若不阻止事件传播每次（单击子元素）事件触发流程是： Document->子元素（原生事件触发）->父元素（原生事件）->回到Document->React

3.7K1 0

jQuery（事件和动画-基础事件、复合事件）

基础事件 click 对应 onclick 鼠标单击事件 dbclick 对应ondbclick 鼠标双击事件 mouseover 对应 onmouseover 鼠标移入事件 mouseout 对应...onmouseout 鼠标移出事件 mouseenter 对应onmouseenter鼠标进入事件 mouseleave 对应 onmouseleave鼠标离开事件 keyup 对应onkeyup...注意： mourseover和mourseenter都是鼠标移入元素时触发，不同点：mourseover无论鼠标移入被选元素还是被选元素的子元素都会触发。...mourseenter只有移入被选元素才会触发； mourseout和mourseleave都是鼠标移除元素时触发。不同点：mourseout在移除被选元素的子元素时也会被触发。...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

1.4K1 0

原生 JS DOM 常用操作大全

双击鼠标左键时触发mousedown 按下鼠标按键时触发mouseup 释放鼠标按键时触发mouseover 当鼠标经过时触发具有事件冒泡 mouseout 当鼠标离开时触发具有事件冒泡 mouseenter...当鼠标经过时触发不具有事件冒泡 mouseleave 当鼠标经过时触发不具有事件冒泡 mousemove 当移动鼠标时触发contextmenu 禁止鼠标右键菜单selectstart 禁止鼠标选中文字...(“scroll”,()=>{ console.log(element.scrollTop) }) 表单事件 change事件当表单的值发生改变时触发事件对象在触发DOM上的某个事件时会产生一个事件对象...e.target 指向的是事件触发元素别忘了e.通常情况下e.target 和 this 的指向是一致的注意：有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行...）这时候 this 指向的是元素，因为 this 使终指向的是事件绑定的元素 target 指向的是子元素，因为target使终指向的是事件触发的元素 123 abc abc abc 鼠标的事件对象

1021 0

ReactPortals传送门

MouseLeave：当鼠标光标离开一个元素时触发，该事件仅在鼠标从元素内部离开时触发，不会对元素外部的父元素产生影响。...事件将被触发，而当我们再将鼠标移动到b元素时，由于冒泡会再次触发绑定在a元素上的MouseOver事件，再从b元素移出到a元素时会再次触发MouseOver事件。...MouseOut: 当鼠标光标离开一个元素时触发，该事件在鼠标从元素内部离开时触发，并且会冒泡到父元素。...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发，当鼠标从一个元素移动到其子元素时，MouseOut事件会在父元素触发一次，然后在子元素触发一次，MouseOut...，只在鼠标进入或离开元素时触发一次。

2515 0

JavaScript鼠标事件细讲：执行顺序+注意事项+区别比对

常见的鼠标事件有click：单击鼠标左键时发生。...mouseenter/mouseovermouseover(鼠标覆盖)：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。...对应的移除事件是mouseoutmouseenter(鼠标进入)：当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleavemouseenter/mouseover...区别点：mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素....离开时，却是 mouseout 先触发，mouseleave后触发鼠标事件执行顺序下来看下面代码 dsafsa

3.6K2 1

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过...mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单注意：执行顺序：mousedown —> mouseup —> click...区别：mouseover和mouseout子元素也会触发，可以冒泡触发区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡阻止鼠标的默认事件 e.preventDefault...x，y clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标...offsetX，offsetY offsetX，offsetY 针对目标元素的左上角坐标（e.target），下面截图中鼠标点击有误差，不影响结果。

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云