解决事件冒泡兼容性问题
① 在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>