jq-demo-阻止冒泡，阻止默认行为

Posted 2020-10-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq-demo-阻止冒泡，阻止默认行为相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id = "box" style = "width: 200px; height: 200px; background:green;">
 9             <input type="button" value = "按钮" />    
10         </div>
11         
12         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
13         <script>
14             $(function () {
15                 $("body").click(function () {
16                     console.log("body");
17                 });
18                 $("#box").click(function () {
19                     console.log("div");
20                 });
21                 $("input").click(function (e) {
22                     console.log("input");
23                     
24                     e.stopPropagation();//阻止冒泡
25                     console.log(e.isPropagationStopped);//true
26                     
27                     e.preventDefault()//阻止浏览器默认行为
28                 })
29             })
30         </script>
31     </body>
32 </html>

e.stopPropagation();//阻止冒泡
console.log(e.isPropagationStopped);//true        
e.preventDefault()//阻止浏览器默认行为

以上是关于jq-demo-阻止冒泡，阻止默认行为的主要内容，如果未能解决你的问题，请参考以下文章

js 停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)