嵌套点击事件如何解决触发问题？

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cl11992/article/details/88293990

页面

DOM结构

<div style="height: 45px;">
	<div class="aaa">
		测试1
		<button type="button" class="bbb">测试2</button>
	</div>
</div>
<div style="height: 45px;">
	<div class="ccc" onclick="ccc()">
		测试3
		<button type="button" class="ddd" onclick="ddd()">测试4</button>
	</div>
</div>

JS写法

<script type="text/javascript">
	$(function() {
		//测试1
		$(".aaa").click(function(){
			alert("aaa");
		});
		//测试2
		$(".bbb").click(function(){
			alert("bbb");
		});
	});	
	//测试3
	function ccc(){
		alert("ccc");
	}
	//测试4
	function ddd(){
		alert("ddd");
	}
</script>

发现问题：

1. 在点击测试1的时候，弹出"aaa";
2. 在点击测试2的时候，弹出“bbb”,"aaa";
3. 在点击测试3的时候，弹出“ccc”；
4. 在点击测试4的时候，弹出“ddd”,“ccc”；

这样就不对了呀，我想点击测试2的时候，只弹出“bbb”，在点击测试4的时候只弹出“ddd”。

所以修改测试2和测试4的JS，增加return false；

<script type="text/javascript">
	$(function() {
		//测试1
		$(".aaa").click(function(){
			alert("aaa");
		});
		//测试2
		$(".bbb").click(function(){
			alert("bbb");
            return false;
		});
	});	
	//测试3
	function ccc(){
		alert("ccc");
	}
	//测试4
	function ddd(){
		alert("ddd");
        return false;
	}
</script>

这样修改完变成：

1. 在点击测试1的时候，弹出"aaa";
2. 在点击测试2的时候，弹出“bbb”；
3. 在点击测试3的时候，弹出“ccc”；
4. 在点击测试4的时候，弹出“ddd”,“ccc”；

这样就发生了个神奇的现象

在点击测试2的时候，满足了我的要求，但是在点击测试4的时候，还是不好使。

所以就去研究click和onclick的区别：发现onclick得换个写法

<script type="text/javascript">
	$(function() {
		//测试1
		$(".aaa").click(function(){
			alert("aaa");
		});
		//测试2
		$(".bbb").click(function(){
			alert("bbb");
            return false;
		});
	});	
	//测试3
	function ccc(){
		alert("ccc");
	}
	//测试4
	function ddd(e){
		alert("ddd");
        e.stoppropagation();
	}
</script>

所以以后再遇见嵌套点击事件

如果要使用click，直接用return false就可以了。

如果要使用onclick，需要传入e，使用e.stoppropagation()就可以了。