项目中往往会遇到这样的需求：父元素占据整个屏幕，中间有个子元素窗口，我们希望点击父元素时关闭整个窗口，但是点击子元素的时候不进行窗口关闭。实际上，这就涉及到了常说的冒泡。因为子元素属于父元素，点击子元素默认会触发父元素的关闭窗口时间，因此我们需要阻止冒泡。
<div class = "parent">
<div class = "son"></div>
</div>
$(".parent").on("click", function() {//点击父级元素关闭
$('.parent').hide();
});
$(".parent").on("click", ".son", function(e) {//点击子级不受影响
e.stopPropagation()
})
前言 项目中往往会遇到这样的需求：父元素占据整个屏幕，中间有个子元素窗口，我们希望点击父元素时关闭整个窗口，但是点...
点击别处关闭浮层 1.阻止事件传播（stopPropagation） 阻止冒泡，不通知父级元素代码(documen...
不使用修饰符情况 执行结果：点击了子元素；点击了父元素 stop - 阻止事件冒泡 执行结果：点击了子元素（未触发...
问题1：出现事件冒泡，父级元素的点击事件传递给了子元素。 解决方法：阻止事件冒泡 方法一：function(e){...
MUI 阻止冒泡到 document (或者其余父级元素) mui( '父级' ).on('tap','当前点击对...
都可以阻止事件冒泡（子元素向父元素冒泡） stopImmediatePropagation阻止事件冒泡并且阻止相同...
时间冒泡就是说: 当点击子元素的时候, 父元素或者祖先元素如果也绑定了点击事件, 那么父元素或者祖先元素的事件也会...
测试代码 效果如图 当我们点击子元素(黄色区域)时会先触发子元素的点击事件，然后会继续触发父元素的点击事件，阻止冒...
原理：bind事件绑定不会阻止冒泡事件向上冒泡catch事件绑定可以阻止冒泡事件向上冒泡 当点击子元素的catch...
冒泡事件：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签，如父元素和子元素都绑定了点击事件，当...
本文标题：点击父级元素关闭窗口，点击子元素不受影响（阻止冒泡）
本文链接：https://www.haomeiwen.com/subject/wghwpktx.html
网友评论