jQuery中阻止冒泡

发布时间：2020-10-19 08:01:34 作者：lflianglan
来源：网络阅读：390

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
        #wrap{ 
            width:500px; 
            height:400px; 
            pink; < /span>
        } 
        #center{ 
            width:300px; 
            height:300px; 
            red; < /span>
        } 
        #inner{ 
            width:100px; 
            height:100px; 
            background:#fff; 
        } 
    </style> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
        $(function(){ 
            $("#wrap").click(function(){ 
                alert("我是最外层"); 
            }); 
            $("#center").click(function(aaa){//传一个参数，这个参数不仅可以是event，也可以是其他的，参数可以自定义 
                alert("我是中间层"); 
                aaa.stopPropagation();//给这个参数一个stopPropagation()方法，这样就可以阻止冒泡了 
            }); 
            $("#inner").click(function(){ 
                alert("我是最里层"); 
                return false;//直接用return false代替aaa.stopPropagation()也可以阻止冒泡 
            }) 
        }) 
    </script> 
</head> 
<body> 
    <div id="wrap">我是最外层 
        <div id="center">我是中间层 
            <div id="inner">我是最里层</div> 
        </div> 
    </div> 
</body> 
</html>

冒泡：当一个元素里面包着其他元素，里面和外面的元素都给点击事件，点击里面的元素时同

时会触发外面的元素，造成意外的效果。冒泡就是因为事件会按照DOM的层次结构像水泡一样不断向上

直至顶端。

解决停止冒泡的方法一：1.给每一个元素一个事件对象，event

2.用stopPropagation()方法停止冒泡。

解决停止冒泡方法二：return false

jQuery中阻止冒泡

相关阅读