订阅汇聚素材网Feed

事件冒泡和阻止默认行为 jQuery

1、事件冒泡

<!doctype html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script type=”text/javascript”>
$(function() {
//为 <span> 元素绑定 click 事件
$(“span”).click(function() {
$(“#msg”).html($(“#msg”).html() + “<p>内层span元素被单击</p>”);
});
//为 Id 为 content 的 <div> 元素绑定 click 事件
$(“#content”).click(function() {
$(“#msg”).html($(“#msg”).html() + “<p>外层div元素被单击</p>”);
});
//为 <body> 元素绑定 click 事件
$(“body”).click(function() {
$(“#msg”).html($(“#msg”).html() + “<p>body元素被单击</p>”);
});
});
</script>

<!– CSS –>
<style type=”text/css”>
#content {
background: #b17af5;
}
</style>
<meta charset=”utf-8″>
</head>

<!– HTML –>
<body>
<div id=”content”>
外层div元素<br />
<span style=”background: silver;”>内层span元素</span><br />
外层div元素
</div><br />
<div id=”msg”></div>
</body>
</html>

当点击内部 <span> 元素时,会触发自身及外层 <div> 和 <body> 的点击事件,这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为,使用 stopPropagation() 方法来实现。
修改 <span> 元素的 click 事件函数:

//为 <span> 元素绑定 click 事件
$(“span”).click(function(event) { //为方法添加一个事件对象参数
$(“#msg”).html($(“#msg”).html() + “<p>内层span元素被单击</p>”);
event.stopPropagation(); //阻止 <span> 的 click 事件冒泡
});

此时点击内部 <span> 元素时,只会触发自身的 click 事件,不会再向上冒泡。

2、阻止默认行为
有时候用户的操作未满足某些条件时,需要阻止某些元素的默认行为,如链接的跳转和表单的提交等,jQuery 提供了 preventDefault() 方法来实现。
当用户未填写用户名时,阻止表单提交:

<html>
<head>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script type=”text/javascript”>
$(function() {
$(“:submit”).click(function(event) {  //为方法添加一个事件对象参数
//当未输入用户名时,提示并阻止提交
if ($(“:text”).val() == “”) {
$(“#msg”).text(“用户名不能为空”);
event.preventDefault();  //阻止提交按钮的默认行为(提交表单)
}
});
});
</script>
<meta charset=”utf-8″>
</head>

<!– HTML –>
<body>
<form action=”register.action”>
用户名
<input type=”text” name=”id” />
<input type=”submit” value=”注册” />
<div id=”msg”></div>
</form>
</body>
</html>

如果想同时阻止事件冒泡和阻止元素默认行为,可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
如:$(“:submit”).click(function(event) {  //为方法添加一个事件对象参数
//当未输入用户名时,提示并阻止提交
if ($(“:text”).val() == “”) {
$(“#msg”).text(“用户名不能为空”);
return false;  //阻止提交按钮的默认行为(提交表单)和事件冒泡
}
});

$(“span”).click(function(event) { //为方法添加一个事件对象参数
$(“#msg”).html($(“#msg”).html() + “<p>内层span元素被单击</p>”);
return false; //阻止 <span> 的 click 事件冒泡和默认行为(此元素没有默认行为)
});

4 人Likes
  

文章转载请注明:事件冒泡和阻止默认行为 jQuery-汇聚素材网

本文固定链接:http://www.webhj.com/hj-1645.html  +复制链接

事件冒泡和阻止默认行为 jQuery:等您坐沙发呢!

发表评论

*

*

5 + 7

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍