事件冒泡。阻止事件冒泡 |阻止元素的默认行为
2015-04-12 20:09
435 查看
<.1>
现冒泡问题。
触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象,一层一层往上。
首先弹出:我是button 然后弹出 我是body 然后弹出 我是document 最后弹出 我是window
说以冒泡的顺序就是:
button >body >document >window
事件冒泡
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。
触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象,一层一层往上。
<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
相关文章推荐
- 阻止默认行为:比如a链接的跳转。阻止冒泡:子元素的事件触发到了父元素身上
- 三、event 和 event.target(目标元素) 和短路运算以及 组织默认行为、阻止冒泡、事件委托
- 详解vue事件对象、冒泡、阻止默认行为
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
- jQuery 中的事件冒泡和阻止默认行为
- vuejs-阻止事件冒泡与默认行为
- js阻止元素的默认事件与冒泡事件
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- vuejs-阻止事件冒泡与默认行为
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
- javascript阻止事件冒泡和浏览器的默认行为
- javascript阻止事件冒泡和浏览器的默认行为
- 阻止事件冒泡\阻止默认行为
- javascript阻止事件冒泡和浏览器的默认行为
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- JavaScript事件冒泡和阻止默认行为和阻止事件冒泡(转载)
- js取消事件冒泡和阻止事件的默认行为(兼容写法)
- javascript 阻止元素对于事件的默认行为
- Js学习笔记-事件冒泡、事件捕获、阻止默认行为