首页 > 编程语言 > 详细

夺命雷公狗---javascript NO:15 事件冒泡3

时间:2015-12-09 10:01:01      阅读:182      评论:0      收藏:0      [点我收藏+]

解决事件冒泡兼容性问题

① 在public.js函数库中创建stopBubble函数

② 判断浏览器类型

//冒泡兼容性问题

 

function stopBubble(event){
    if(window.event){
        //IE
        window.event.cancelBubble = true;
    }else{
        event.stopPropagation();
    }
}

 

③ 在html页面测试stopBubble函数

 

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<style type=”text/css”>
div#div1{
width:500px;
height:500px;
background:red;
}
div#div2{
width:400px;
height:400px;
background:blue;
}
div#div3{
width:300px;
height:300px;
background:yellow;
}
</style>
<script src=”public.js”></script>
<script>
window.onload = function(){
addEvent($(‘div1′),’click’,function(){
alert(‘div1′);
})
addEvent($(‘div2′),’click’,function(){
alert(‘div2′);
//IE模型
//window.event.cancelBubble = true;
//w3c
//event.stopPropagation();
stopBubble(event);
})
addEvent($(‘div3′),’click’,function(){
alert(‘div3′);
//IE模型
//window.event.cancelBubble = true;
//w3c
//event.stopPropagation();
stopBubble(event);
})
}
</script>
</head>
<body>
<div id=”div1″>
<div id=”div2″>
<div id=’div3′></div>
</div>
</div>
</body>
</html>

 

夺命雷公狗---javascript NO:15 事件冒泡3

原文:http://www.cnblogs.com/leigood/p/5031887.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!