JS中点击事件冒泡阻止
Posted 莫小龙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中点击事件冒泡阻止相关的知识，希望对你有一定的参考价值。
JS中点击事件冒泡阻止
解析：
一个div层\'out\'，内含有一个div层\'in\'。如下：
两个层都绑定了点击事件，但是点击in层的时候，点击事件会出现冒泡现象，同时也会触发out层的点击事件。
但是并不希望触发out的点击事件，只希望触发in层的点击事件，所以要阻止冒泡事件。
解决方法：
e.preventDefault()
案例代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>点击事件冒泡处理</title> <script type="text/javascript"> var fun1 = function (e) { alert("我是父点击事件"); } var fun2 = function (e) { e.stopPropagation();//阻止点击事件向上冒泡 alert("我是子点击事件"); } </script> </head> <body> <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red"> 父节点 <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px"> 子节点 </div> </div> </body> </html>
参考自：https://www.cnblogs.com/mdorg/p/5617408.html
http://blog.csdn.net/abb_chen/article/details/49406649
以上是关于JS中点击事件冒泡阻止的主要内容，如果未能解决你的问题，请参考以下文章