温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery中阻止冒泡

发布时间:2020-10-19 08:01:34 来源:网络 阅读:556 作者:lflianglan 栏目:web开发

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
  5.     <title></title> 
  6.     <style type="text/css"> 
  7.         #wrap{ 
  8.             width:500px; 
  9.             height:400px; 
  10.             pink; < /span>
  11.         } 
  12.         #center{ 
  13.             width:300px; 
  14.             height:300px; 
  15.             red; < /span>
  16.         } 
  17.         #inner{ 
  18.             width:100px; 
  19.             height:100px; 
  20.             background:#fff; 
  21.         } 
  22.     </style> 
  23.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  24.     <script type="text/javascript"> 
  25.         $(function(){ 
  26.             $("#wrap").click(function(){ 
  27.                 alert("我是最外层"); 
  28.             }); 
  29.             $("#center").click(function(aaa){//传一个参数,这个参数不仅可以是event,也可以是其他的,参数可以自定义 
  30.                 alert("我是中间层"); 
  31.                 aaa.stopPropagation();//给这个参数一个stopPropagation()方法,这样就可以阻止冒泡了 
  32.             }); 
  33.             $("#inner").click(function(){ 
  34.                 alert("我是最里层"); 
  35.                 return false;//直接用return false代替aaa.stopPropagation()也可以阻止冒泡 
  36.             }) 
  37.         }) 
  38.     </script> 
  39. </head> 
  40. <body> 
  41.     <div id="wrap">我是最外层 
  42.         <div id="center">我是中间层 
  43.             <div id="inner">我是最里层</div> 
  44.         </div> 
  45.     </div> 
  46. </body> 
  47. </html> 
冒泡:当一个元素里面包着其他元素,里面和外面的元素都给点击事件,点击里面的元素时同
时会触发外面的元素,造成意外的效果。冒泡就是因为事件会按照DOM的层次结构像水泡一样不断向上
直至顶端。
 
解决停止冒泡的方法一:1.给每一个元素一个事件对象,event
                      2.用stopPropagation()方法停止冒泡。
解决停止冒泡方法二:return false
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI