事件对象(二)
冒泡和默认行为
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。
例，html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件对象</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style="width: 200px; height: 200px; background-color: #ccc;"> <input type="button" value="按钮" /> </div> </body> </html>
三个不同元素触发事件：
注意：当我们点击文档的时候，只触发文档事件；当我们点击div层时，触发了div和文档两个；当我们点击按钮时，触发了按钮、div和文档。触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象，一层一层往上。
jQuery提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。
阻止冒泡：
//冒泡和阻止冒泡 $("input").click(function(e) { e.stopPropagation(); //禁止冒泡 alert("按钮被触发！"); }); $("div").click(function(e) { e.stopPropagation(); //禁止冒泡 alert("div层被触发了！"); }); $(document).click(function() { alert("文档页面被触发了！"); });
网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
如html(部分)代码：
<div style="width: 200px; height: 200px; background-color: #ccc;"> <input type="button" value="按钮" /> <a href="http://www.ycku.com" target="_blank">ycku.com</a> </div>
jQuery代码：
$("a").click(function(e) {
e.preventDefault(); //阻止默认行为
alert("ycku.com");
});
禁止提交表单跳转：
html(部分)代码如下：
<form action="123.html"> <div style="width: 200px; height: 200px; background-color: #ccc;"> <input type="submit" value="按钮" /> <a href="http://www.ycku.com" target="_blank">ycku.com</a> </div> </form>
方式①禁止提交表单跳转：
//禁止表单提交 $("input").click(function(e) { e.preventDefault(); //阻止默认行为 alert("表单提交"); });
方式②禁止提交表单跳转：
//禁止表单提交 $("form").submit(function(e) { e.preventDefault(); });
注意：如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时写上：event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候，还有一种简写方案代替，就是直接return false。
//阻止冒泡又禁止默认行为 $("a").click(function(e) { e.preventDefault(); e.stopPropagation(); alert("ycku.com"); });
或者
$("a").click(function(e) {
alert("ycku.com");
return false;
});
冒泡和默认行为的一些方法
| 方法名 | 描述 |
| preventDefault() | 取消某个元素的默认行为 |
| isDefaultPrevented() | 判断是否调用了preventDefault()方法 |
| stopPropagation() | 取消事件冒泡 |
| isPropagationStopped() | 判断是否调用了stopPropagation()方法 |
| stopImmediatePropagation() | 取消事件冒泡，并取消该事件的后续事件处理函数 |
| isImmediatePropagationStopped() | 判断是否调用了stopImmediatePropagation()方法 |
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件对象</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="123.html"> <div style="width: 200px; height: 200px; background-color: #ccc;"> <input type="submit" value="按钮" /> <a href="http://www.ycku.com" target="_blank">ycku.com</a> </div> </form> </body> </html>
jQuery代码如下：
$(document).click(function() { alert("document"); }); $("div").click(function(e) { alert("div"); }); $("a").click(function(e) { e.preventDefault(); e.stopPropagation(); alert(e.isDefaultPrevented()); //true alert(e.isPropagationStopped()); //true });
还能这样判断：
$("a").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$("a").click(function(e) {
alert(e.isDefaultPrevented()); //true
alert(e.isPropagationStopped()); //true
});
取消冒泡并取消后续事件处理函数：
$("a").click(function(e) {
e.stopImmediatePropagation();
alert(e.isImmediatePropagationStopped()); //true
alert("a1");
});
$("a").click(function(e) {
alert("a2");
});
$("div").click(function(e) {
alert("div");
});
$(document).click(function() {
alert("document");
});
