两个嵌套的标签分别绑定不用的点击事件 - JS阻止事件冒泡

问题描述

两个嵌套的标签都绑定了各自的点击事件，当点击内部标签的时候同样也会触发外部标签的点击事件

原因解析

事件冒泡：当该标签触发点击事件时，会逐级向上传播，再执行父标签的点击事件

事件冒泡可阅读： https://www.cnblogs.com/christineqing/p/7607113.html

解决思路

思路一：
用event.stopPropagation(); 禁止js的事件冒泡行为

	<script type="text/javascript">
        $(function() {
            $("#id").click(function(event) {
                event.stopPropagation();
            });
        });
	<script>

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

js阻止事件冒泡 https://www.cnblogs.com/hellofangfang/p/10694155.html

本人在使用bootstrap时,禁用事件冒泡会影响bootstrap默认的触发事件,采用自定义实现

思路二：
自定义实现阻止事件冒泡

	var flag = true;
	function inClick(){
	    flag = false;
	}
	function outClick(){
	    if(flag){
	        // ....
	    }
	    flag = true;
	}

定义全局标识变量flag默认为true，内部标签触发点击事件后赋值为false，当向上冒泡执行到父级标签的点击事件时，判断全局变量flag的值，如果为true再执行父标签的点击事件
这样，点击子标签就不会再执行父标签的点击事件