jQuery 事件冒泡

xiaoxiao2021-04-12 33

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href="css/style.css" /> <title></title> <script> $(function(){ var count = 0 ; $("div,p,input").on("click",function(){ alert(count++) ; }) ; }) ; </script> </head> <body> <div><p><input type="button" value="按钮"/></p></div> </body> </html>

这样就会产生事件冒泡。会连续三个弹窗。

阻止事件冒泡

event.stopPropagation() ;

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href="css/style.css" /> <title></title> <script> $(function(){ var count = 0 ; $("div,p,input").on("click",function(){ alert(count++) ; event.stopPropagation() ; }) ; }) ; </script> </head> <body> <div><p><input type="button" value="按钮"/></p></div> </body> </html>

阻止了冒泡。只会产生一个弹窗。

转载请注明原文地址: https://ju.6miu.com/read-667685.html

技术

最新回复(0)