嵌套的div元素，如果父级和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下js阻止默认事件与js阻止事件冒泡的示例：

1、event.preventDefault() 阻止元素发生默认的行为。

使用场景：a元素的点击跳转的默认事件；button、radio等表单元素的默认事件。

<a href="https://jiangdesheng.com/">Go to www.eqifei.net</a>
<script>
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
  });
});
</script>

解释：点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到给定的链接了。

2、event.stopPropagation() 阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

<div onClick="alert(1)" style="width:150px;height:80px;background:#f00">
  <div onClick="alert(2)" style="width:100px;height:50px;background:#039">
    <input type="button" id="demo" value="点我试试" onClick="alert(3)">
  </div>
</div>

这里在点击按钮时会依次弹出3、2、1；点击蓝色部分依次弹出2、1；点击红色部分只弹出1。但是本来只想让绑定在button上的事件发生，却无意中触发了它的两个父级上的事件，这里我们只是做了一个简单测试，试想如果在项目开发中，某个按钮和他的父级同时绑定了很重要的事件，那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

//jquery
$("#demo").click(function(event){
	event.stopPropagation();
})
//js
document.getElementById('demo').addEventListener('click',function(e){
	e.stopPropagation()
},false);

在“点击区域外消失”效果中就需要用到该方法：

<div class="box">点我没反应，但是点击除我之外的区域我会消失</div>
<script type="text/javascript">
$(document).click(function(){
	$(".box").hide();
})
$(".box").click(function(event){
	event.stopPropagation();
})
</script>

当然，“点击区域外消失”效果也还有其他的实现方法（比如将“区域外”用一个透明的大遮罩遮住，再给遮罩加上点击事件），也可用下面这种方法：

<div id="myDiv" style="display:none;">我是被隐藏的那句话</div>
<input type="button" value="点我显示那句话" id="showDiv"/>
<script>
function addListener(element, e, fn) {
	if (element.addEventListener) {
		element.addEventListener(e, fn, false);
	} else {
		element.attachEvent("on" + e, fn);
	}
}
addListener(document, "click", function(evt) {
	var evt = window.event ? window.event: evt,
		target = evt.srcElement || evt.target;
		if (target.id == "showDiv") {
			document.getElementById("myDiv").style.display = "";
			return;
		} else {
			while (target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html") {
				target = target.parentNode;
			}
			if (target.nodeName.toLowerCase() == "html") {
				document.getElementById("myDiv").style.display = "none";
			}
		}
})
</script>

参考文档：

1、jQuery event.preventDefault() 方法

2、jQuery event.stopPropagation() 方法

3、js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

4、jQuery点击区域外消失