首页 > 代码库 > jQuery中处理事件冒泡的方法和取消后续内容的方法
jQuery中处理事件冒泡的方法和取消后续内容的方法
一：事件冒泡的意思是：一个大的容器已经设置了事件，如果这个容器里还包容着一个小的容器也设置了自己的事件，那么因为小容器是在大容器里面的，触发小容器的事件同时也等于触发了大容器的事件，有时这并不是我们想要的结果，我们可以通过能力检测来阻止事件冒泡如：
<script type="text/javascript">
$(function () {
$(‘#da‘).css(‘width‘, ‘700px‘).css(‘height‘, ‘300px‘).css(‘border‘, ‘1px solid Red‘);
$(‘dl‘).css(‘width‘, ‘500px‘).css(‘height‘, ‘210px‘).css(‘border‘, ‘1px solid blue‘);
$(‘dt‘).addClass(‘words‘).click(function () {
$(‘dd strong‘).css(‘color‘, ‘#FF0099‘);
});
$(‘dd‘).css(‘width‘, ‘330px‘).css(‘height‘, ‘210px‘).css(‘border‘, ‘1px solid green‘).css(‘float‘, ‘left‘).css(‘margin‘, ‘0px auto‘);
$(‘#xiao‘).css(‘width‘, ‘270px‘).css(‘height‘, ‘35px‘);
$(‘#xiao>img‘).css(‘float‘, ‘right‘);
$(‘dd .daoyan‘).click(function () {
$(‘span‘).css(‘font-weight‘, ‘bolder‘);
})
$(‘dd>#biaoqian‘).click(function () {
$(‘dd .su‘).css(‘backgroundColor‘, ‘#E0F8EA‘);
})
$(‘img[alt=收藏本片]‘).click(function (event) {
alert(‘您已收藏成功！‘);
event = event || window.event;
if (event.stopPropagation) {
//IE浏览器管用
event.stopPropagation();
} else {
event.cancelBubble = true;
}
})
})
</script>
<style type="text/css">
.words
{
width:151px;
height:210px;
border:1px solid yellow;
float:left;
}
</style>
</head>
<body>
<div id=‘da‘>
<dl>
<dt><img src="http://www.mamicode.com/img/pic.gif" alt="非缘勿扰"/><img src="http://www.mamicode.com/img/col.gif" alt="收藏本片"/></dt>
<dd><strong>非缘勿扰（共36集）<br/>主演：</strong>苏有朋/秦岚/傅艺伟等<br/><strong class="daoyan">导演：</strong><span>赖水清</span><br /><strong id="biaoqian">标签：</strong><span class="su">苏有朋</span> 国产电视剧 <span class="su">2013</span> 连续剧<br /><strong>剧情：</strong>当代都市，大龄女刘琳、杨阳都在寻找着自己的如意郎君。刘琳偶遇陆氏房产总裁陆西诺，两人成了欢喜冤家，遇到暗恋陆西诺的丁娟的记恨...<a href="http://www.mamicode.com/#">点击了解更多</a></dd>
</dl>
<div id="xiao"><img src="http://www.mamicode.com/img/btn.gif" alt="点击播放"/></div>
</div>
</body>
其中<dt><img src="http://www.mamicode.com/img/pic.gif" alt="非缘勿扰"/><img src="http://www.mamicode.com/img/col.gif" alt="收藏本片"/></dt>
我的dt标签里放了两张图，我设置了dt的点击事件：
$(‘dt‘).addClass(‘words‘).click(function () {
$(‘dd strong‘).css(‘color‘, ‘#FF0099‘);
});
那么我的第二张图片点击事件会同时触发两个事件，因为都同在dt标签里
$(‘img[alt=收藏本片]‘).click(function (event) {
alert(‘您已收藏成功！‘);
})
此时我可以用能力检测的方法判断浏览器的解析能力，根据不同浏览器选用不同方法：
$(‘img[alt=收藏本片]‘).click(function (event) {
alert(‘您已收藏成功！‘);
//取消事件冒泡，要进行能力检测，也就是分IE和非IE两种情况
//01.第一道能力检测，event对象在IE下写法是window.event，而在
//非IE下直接用event;
event = event || window.event;
//第二道能力检测
if (event.stopPropagation) {
//IE浏览器管用
event.stopPropagation();
} else {
event.cancelBubble = true;
}
})
二：取消后续执行内容如例所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//点击a标签，不进行页面跳转
window.onload = function () {
var obj = document.getElementById("myhref");
obj.onclick = function (event) {
//取消默认行为
//return false;
//分浏览器
//IE下
//01.第一道能力检测
event = event || window.event;
if (event.preventDefault) {
//非IE下
event.preventDefault();
} else {
event.returnValue = http://www.mamicode.com/false;
}
};
}
</script>
</head>
<body>
<a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>
这里的a标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。