jquery 阻止冒泡

来源：互联网发布：东方财富软件怎么样编辑：程序博客网时间：2024/04/27 23:50

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>    <title>MyHtml.html</title>    <style type="text/css">        #inner{height: 100px;background: #cfc;}        #middler{background: #ccf;}        #outer{background: #fcc;}        div{border: 1px solid blue;padding: 20px;width: 200px;}    </style>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>        <script type="text/javascript">        $(function () {            $("*").click(function (event) {                alert($(this).attr("id")); //这样在点击inner的时候会从里到外依次响应其点击事件，依此弹出inner,middler,outer                  //return false;//这样则会阻止其默认行为，阻止事件不再冒泡，这样就只会弹出inner                  event.stopPropagation(); //阻止事件冒泡              });            $("div").click(function () {                alert($(this).html);            });        });      </script></head><body>    <div id="outer">        最外层        <div id="middler">            中间层            <div id="inner">最里层</div>        </div>    </div></body></html>

阻止冒泡的另一个思路——判断激发事件的是自己，而不是别的元素，这样就可以了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <style type="text/css">        #inner{height: 100px;background: #cfc;}        #middler{background: #ccf;}        #outer{background: #fcc;}        div{border: 1px solid blue;padding: 20px;width: 200px;}    </style></head><body>    <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1>    <div id="outer">        最外层        <div id="middler">            中间层            <div id="inner">最里层</div>        </div>    </div></body></html><script type="text/javascript">    var bodyObj = document.body ? document.body : document.documentElement;    bodyObj.onclick = function (e) {        var event = e ? e : window.event;        var target = event.target ? event.target : event.srcElement;        if(target===bodyObj)            document.getElementById("inner").style.display = "none";    }</script>