jquery冒泡事件

来源：互联网发布：python开发入门详解编辑：程序博客网时间：2024/06/08 18:46

原文：http://www.jb51.net/article/84908.htm

<body>
<div id="content">
外层div元素 <span>内层span元素</span>
</div>
<div id="info"></div>
</body>

$(function() {
//为span元素绑定click事件
$('span').bind('click', function() {
var txt = $('#info').html() + '<p>内层span元素被点击</p>';
$('#info').html(txt);
event.stopPropagation(); //停止事件冒泡
});
//为div元素绑定click事件
$('#content').bind('click', function() {
var txt = $('#info').html() + '<p>外层div元素被点击</p>';
$('#info').html(txt);
return false;//停止事件冒泡
});
//为body元素绑定click事件
$('body').bind('click', function() {
var txt = $('#info').html() + '<p>body元素被点击</p>';
$('#info').html(txt);
});
});

/*当你单击‘内层span元素'时，即触发<span>元素的click事件时，会输出3条记录
即：
内层span元素被点击
外层div元素被点击
body元素被点击
这就是事件冒泡引起的 */

/* 阻止冒泡事件：click事件中添加 return false 或 event.stopPropagation(); */

阅读全文

0 0