1.取消事件冒泡
具體效果：點擊小div不觸發大div的事件
具體代碼如下
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<style type="text/css">
#mybigdiv {
width: 300px;
height: 300px;
border: 1px solid red;
}
#myid {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
//取消事件冒泡
//第一道能力檢測:分瀏覽器
/*
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}*/
$(function(){
//給大div註冊事件
$("#mybigdiv").click(function(){
alert('我是大div');
});
//小div
$("#myid").click(function(event){
alert('我是小div');
//UI工程師 能力檢測
//判定瀏覽器引擎是IE還是其他瀏覽器(第一道能力檢測)
event=event||window.event;
//第二道能力檢測
//阻止事件冒泡
if(event.stopPropagation){//非IE瀏覽器 chrome
event.stopPropagation();
}else{
//IE瀏覽器
event.cancelBubble=true;
}
});
});
</script>
</head>
<body>
<div id="mybigdiv">
我是大div
<div id="myid">我是小div</div>
</div>
</body>2阻止之後事件的繼續
具體效果：阻止超鏈接訪問百度頁面
具體代碼如下
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//獲取使用事件的對象
$("#myhref").click(function(event){
//能力檢測
//判斷瀏覽器是IE瀏覽器還是非IE瀏覽器
event=event||window.event;
//阻止事件的繼續
if(event.preventDefault){ //非IE下內核 webkit引擎
event.preventDefault();
}else{
event.returnValue=false; //IE引擎
}
});
});
</script>
</head>
<body>
<a id="myhref" href="http://www.cnblogs.com">去百度</a>
</body>