您的位置：首页 > Web前端 > JQuery

jQuery中的事件冒泡及其处理办法

2016-08-06 18:36 489 查看

在页面上可以有多个事件，也可以多个元素响应同一个事件。

假设网页上有两个元素，其中一个元素嵌套在另一个元素里面，并且都绑定了同一事件，同时<body>上也绑定了该事件，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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-3.0.0.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {

$("#one").click(function(){
$("#one").hide();
});
$("#two").click(function(){
$("#two").hide();
});
$("#three").click(function(){
$("#three").hide();

});

});

</script>

</head>

<body id="one">

111 <br />

<div id="two"> 2222 <br />

<span id="three"> 333 </span> </div>

</body>

</html>

运行结果:

此时若单击333则会出现上面的数全部消失的情况，这就是jQuery中的事件冒泡。

该怎么处理呢？

方法一就是加return false。

方法二就是给事件添加参数，如event 然后用参数调用stopPropagation()方法即可防止事件冒泡。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航