首页 > 代码库 > 取消后续内容执行
取消后续内容执行
一：事件冒泡的意思是：一个大的容器已经设置了事件，如果这个容器里还包容着一个小的容器也设置了自己的事件，那么因为小容器是在大容器里面的，触发小容器的事件同时也等于触发了大容器的事件，有时这并不是我们想要的结果，我们可以通过能力检测来阻止事件冒泡如：
<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标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。
你的代码在页面载入过程中已经完成事件绑定了，没有阻止后绑定的事件的办法了，不过可以删除当前指定节点的事件绑定。方法如下：
$("#btn").click(function(){
if($("#tx").val()==""){
alert("e1");
}else{
//删除后绑定的事件。。。
$("#btn").unbind(‘click‘);
}
});
说明：
unbind([type],[data])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
I如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
jquery:怎可以阻止第二次点击click事件？
jquery提供了一个只触发一次点击的方法
obj.one(function(){
});
或者用obj.unbind("click")取消点击事件
取消后续内容执行