事件对象(二)

冒泡和默认行为

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

例，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");
});

posted @ 2016-04-24 22:51 叶十一少阅读(223) 评论(0) 收藏举报

刷新页面返回顶部

叶十一少

事件对象(二)

公告