平武建站

jQuery中阻止冒泡

  1.  
  2.  
  3.  
  4.      
  5.      
  6.      
  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.      
  23.      
  24.      
  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.      
  39.  
  40.  
  41.     我是最外层 
  42.         我是中间层 
  43.             我是最里层
 
  •         
    •  
  •     
    •  
  •  
  •  
    • 冒泡：当一个元素里面包着其他元素，里面和外面的元素都给点击事件，点击里面的元素时同
    时会触发外面的元素，造成意外的效果。冒泡就是因为事件会按照DOM的层次结构像水泡一样不断向上
    直至顶端。
     
    解决停止冒泡的方法一：1.给每一个元素一个事件对象，event
                          2.用stopPropagation()方法停止冒泡。
    解决停止冒泡方法二：return false

    分享文章：jQuery中阻止冒泡
    文章网址：http://pwwzsj.com/article/ieoodd.html

    其他资讯