事件冒泡。阻止事件冒泡 |阻止元素的默认行为

来源：互联网发布：windows vista和xp 编辑：程序博客网时间：2024/05/15 12:47

<.1>

事件冒泡

如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出
现冒泡问题。

触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象，一层一层往上。

<html><head>    <title></title>    <script src="jquery-2.1.3.js"></script>    <style type="text/css">        div#a {            width: 500px;            height: 500px;            background-color: red;        }        div#b,div#d{            width: 300px;            height: 300px;            background-color: blue;        }        div#c,div#e{            width: 150px;            height: 150px;            background-color: yellow;        }    </style></head><body>    <!--阻止事件冒泡-->    <div id="a">        <div id="b">            <div id="c">                <a id="a_linkB" href="http:///www.hao123.com" target="_blank">好123导航</a>            </div>        </div>    </div>    <!--阻止事件的默认行为-->    <a id="a_linkA" href="http://www/baidu.com" target="_blank">百度</a>    <!--阻止表单提交-->    <form action="123.html">        <input id="sub" type="submit" value="提交" />    </form>    <!--阻止事件冒泡，并阻止该事件后的后续事件处理函数-->    <div id="d">        <div id="e">测试stopImmediatePropagation()取消事件冒泡，并取消该事件的后续事件处理函数</div>    </div></body></html>

<script type="text/javascript">    $(function () {                //--------------------------【1】stopPropagation() 禁止事件冒泡        $("div").click(function (e) {            //e.stopPropagation(); //禁止div元素绑定的click事件冒泡 。当然我们还可以禁止其他事件的冒泡，比如mouseOver..等等        })        $("#a").click(function () {            alert("我是A");        })        $("#b").click(function () {            alert("我是B");        })        $("#c").click(function (e) {           // e.stopPropagation(); //禁止id=c的div元素绑定的click事件冒泡            alert("我是C");        })        //-----------------------【2】preventDefault() 取消某个元素的默认行为        //网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。这就是元素的默认行为。        $("#a_linkA").click(function (e) {            e.preventDefault(); //阻止id为a_link的这个超链接的默认行为，当你点击这个超链接的时候，就不会在进行跳转到指定的网页了。        })        //-------------------------------------禁止表单提交        $("#sub").click(function (e) {            e.preventDefault();//禁止表单提交 ；   禁止submit的默认提交行为。我们看到点击“提交”的时不再提交数据了。        })        //如果说你不想对submit按钮的click默认事件做阻止,（submit的click默认事件就是提交表单），而是仅仅是想阻止这个提交事件，我们就可以在form表单这进行        $("form").submit(function (e) {            e.preventDefault(); //禁止表单提交。推荐用法        });                //-------------------------------------同时阻止默认行为且禁止冒泡行为        $("#a_linkB").click(function (e) {            e.stopPropagation(); //禁止id=a_linkB这个<a>标签的click事件冒泡            e.preventDefault();  //禁止id=a_linkB这个<a>标签的click事件的默认行为（即：点击超链接不再有跳转的功能了）            //。这两个方法如果需要同时启用的时候 还有一种简写方案代替，就是直接return false。            //return false;        });        $("#a_linkB").click(function (e) {            alert(e.isDefaultPrevented()); //判断是否调用了preventDefault()方法 。即：判断是否阻止了#a_linkB元素的click事件的默认行为  打印出：true            alert(e.isPropagationStopped()); // 判断是否调用了stopPropagation()方法。即：判断是否阻止了#a_linkB元素的click事件冒泡 //打印出：true        })        //--------------------------【3】stopImmediatePropagation() 取消事件冒泡，并取消该事件的后续事件处理函数        $("#d").click(function () {            alert("我是D");  //测试冒泡        })        $("#e").click(function (e) {            e.stopImmediatePropagation(); //当我使用了这段代码后，下面那段$("#e").click(function () { alert("我还是E") }) 代码就不会再执行了。 而且也不会再执行$("#d").click(function () { alert("我是D");}) 这段代码了。因为stopImmediatePropagation()的作用就是阻止事件冒泡，【所以它就阻止了$("#d").click(function () { alert("我是D");})这段代码的执行】。  并且阻止事件的后续的处理函数【而下面那段$("#e").click(function () { alert("我还是E") }) 代码就是当前事件的后续事件。所以就又被阻止了】            alert("我是E");            alert(e.isImmediatePropagationStopped());//判断是否调用了stopImmediatePropagation()方法        })        $("#e").click(function (e) { //如果上面的那个函数使用了stopImmediatePropagation();方法，我将不会被执行到。（注意：我们都是#e元素的click事件哦，如果不是同的元素是不起作用的）             alert("我还是E")                   })    })</script>

事件冒泡的顺序

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="jquery-1.11.2.js"></script></head><body>   <button>从我开始冒泡</button></body></html><script type="text/javascript">    $("body").click(function () {        alert("我是body");    })    $(document).click(function () {        alert("我是document");    });    $(window).click(function () {        alert("我是window");    })    $("button").click(function () {        alert("我是button");    }) </script>

首先弹出：我是button 然后弹出我是body 然后弹出我是document 最后弹出我是window

说以冒泡的顺序就是：

button >body >document >window

0 0