子元素的点击事件出发了父元素的滑入滑出事件

最新推荐文章于 2022-07-08 20:11:53 发布

_阿毛

最新推荐文章于 2022-07-08 20:11:53 发布

阅读量527

点赞数 1

CC 4.0 BY-SA版权

分类专栏：实战得真知 js+jquery 文章标签：子元素的点击事件影响父元素的其他类型事件的触发

本文链接：https://blog.youkuaiyun.com/amao_aguai/article/details/90714742

实战得真知同时被 2 个专栏收录

37 篇文章

订阅专栏

js+jquery

31 篇文章

订阅专栏

博主发现子元素点击时触发了父元素的滑入滑出事件，且该问题仅在 Chrome 浏览器出现，火狐等正常。经多方排查后，通过百度尝试多种方法，最终用阻止冒泡的方式解决了此问题。

一开始没发现是什么问题，后来进过多方排查，总之就是判断出了是子元素点击的时候出发了父元素的滑入滑出事件。
我就纳闷了，为什么点击事件会影响划过滑出事件。更诡异的是只有chrome有问题，火狐啥的都好使……
在这里插入图片描述
百度了一下，试了很多方法，就是用阻止冒泡解决的。简化一下模型大概就是这么解决的：

html:
<div id="father">
	<span id="son"></span>
</div>

js:
$("#father").on("mouseenter",function(){}).on("mouseleave",function(){});
$("#son").on("click",function(){});
$("#son").on("mouseenter",function(e){
	e.stopPropagation();
}).on("mouseleave",function(e){
	e.stopPropagation();
});