点击子元素却也触发父元素的点击事件

在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案

HTML 代码

父元素

<div id="father" style="width:600px;height:400px;border:1px solid black;"></div>

子元素

<div id="son" style="width:300px;height:200px;border:1px solid black;margin:100px auto;"></div>

组合在一起

<%-- 父元素 --%>
<div id="father" style="width:600px;height:400px;border:1px solid black;"><%-- 子元素 --%>        <div id="son" style="width:300px;height:200px;border:1px solid black;margin:100px auto;"></div>
</div>

页面效果

添加点击事件

<script type="text/javascript">// 点击父元素发生的事件$("#father").click(function (e) {alert("click father !!!");});// 点击子元素发生的事件$("#son").click(function (e) {alert("click son !!!");});</script>

动图展示页面点击后的效果：点击子元素却也触发了父元素的点击事件

解决方案：

在点击了子元素的时候触发了父元素的点击事件，所以得在父元素的点击事件中添加控制，代码如下

// 点击父元素发生的事件$("#father").click(function (e) {if (e.target.id != "son") {alert("click father !!!");}});

解决后的动图展示

完整代码

 <%-- 父元素 --%><div id="father" style="width:600px;height:400px;border:1px solid black;"><%-- 子元素 --%><div id="son" style="width:300px;height:200px;border:1px solid black;margin:100px auto;"></div></div><script type="text/javascript">// 点击父元素发生的事件$("#father").click(function (e) {if (e.target.id != "son") {alert("click father !!!");}});// 点击子元素发生的事件$("#son").click(function (e) {alert("click son !!!");});</script>

注： e.target.id 表示当前元素的 id

扩展

通常我们开发的时候，页面上很多元素是循环遍历出来的，比如遍历多个 div ，或者无序列表 ul li 等等.. 这时，就不能写固定的元素 id ，因为一个页面上的 id 是唯一的，不可重复的，这时改如何使用 e.target.id 来达到预期效果

修改后的页面代码

<style type="text/css">.father_common {width:200px;height:100px;border:1px solid black;margin-bottom:20px;}.son_common {width:100px;height:50px;border:1px solid black;margin:30px auto;}
</style><%-- 父元素 --%><div id="father" class="father_common"><%-- 子元素 --%><div id="son" class="son_common"></div></div><script type="text/javascript">// 页面加载触发$(function () {for (var i = 0 ; i <= 2; i++) {var div = "";div += "<div id='father" + i + "' class='father_common'>"div += "    <div id='son" + i + "' class='son_common'>";div += "    </div>"div += "</div>"// 第一圈加载到已有页面元素后if (i == 1) {$("#father").after(div);// 之后加载到动态加载的页面元素后} else {$("#father"+(i-1)).after(div);}}})// 页面加载完毕触发$(document).ready(function () {$(".father_common").click(function (e) {alert("click father !!!");});$(".son_common").click(function (e) {alert("click son !!!");});});</script>

注：这里在多个相同元素设置 id 时，使用一样的前缀，后面添加当前遍历的索引，这些就可以避免重复

修改后的页面动图展示

查看一下源码

修改解决方案，还是在父元素中控制

// 点击父元素
$(".father_common").click(function (e) {if (e.target.id.indexOf("son") == -1) {alert("click father !!!");}
});

最终动图展示

希望能够帮助到你

over

点击子元素却也触发父元素的点击事件相关推荐

JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
js关于子元素不触发父元素事件的若干方法
2019独角兽企业重金招聘Python工程师标准>>> 方法一:event.cancelBubble=true; /* 最好用,js通用,event.cancelBubble=tru ...
jq阻止事件冒泡（点击子级不触发父级）的两种方法
方法1 function addFocus() { var e=window.event || arguments.callee.caller.arguments[0]; e.preven ...
php 元素添加子元素,css,html_怎么在添加的子元素上继承父元素上已存在的子元素的属性？，css,html,javascript - phpStudy...
怎么在添加的子元素上继承父元素上已存在的子元素的属性? 请问如何使添加后的子元素(tr)也能在鼠标经过前后继续保留其存在的子元素上的属性? dom的基础应用 window.οnlοad=functio ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
子元素相对于父元素垂直居中对齐
记个笔记 1. 元素相对于浏览器居中 <style>.window-center {/* 将position设置为fixed,使元素相对于浏览器窗口定位 */position: fixed ...
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...
解决子元素浮动，父元素没有撑开的问题
/*子元素浮动,父元素撑开*/ .父元素{} .父元素:before{content:"";display:table; } .父元素:after{content:"&q ...
解决CSS子元素绝对定位致使父元素高度为0
方法: 使用JS 代码: // 解决子元素决定定位父元素高度塌陷 var father = document.querySelector('.father '); var son = document ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...

点击子元素却也触发父元素的点击事件

HTML 代码

扩展

点击子元素却也触发父元素的点击事件相关推荐

最新文章

热门文章