js 事件监听 冒泡事件
2016-01-28 15:04
531 查看
js 事件监听 冒泡事件 的取消
【自己写框架时,才有可能用到】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>事件编程</title> <style type='text/css'> #div1 { width:400px; height:400px; background:#ff0000; } #div2 { width:300px; height:300px; background:blue; } #div3 { width:200px; height:200px; background:yellow; } </style> <script> //取消事件冒泡 //自己写框架时,才有可能用到 function stopBubble(event) { if(window.event) { window.event.cancelBubble = true; } else { event.stopPropagation(); } } window.onload = function() { addEvent($('div1'),'click',function(){ alert('div1'); }) addEvent($('div2'),'click',function(event){ alert('div2'); stopBubble(event); }) addEvent($('div3'),'click',function(event){ alert('div3'); stopBubble(event); }) } </script> </head> <body> <div id='div1'> <div id='div2'> <div id='div3'></div> </div> </div> </body> </html>
相关文章推荐
- Javascript学习笔记(一) -- 基础语法
- js-原型以及继承小案例
- javascript 延迟
- js对象或json对象深拷贝
- js对象转json字符串,并保留js对象中的javascript脚本
- HTML5 音频播放器-Javascript代码(短小精悍)
- js 跨域
- 俄罗斯方块Tetris (javascript+HTML+CSS)
- js event 2
- 探讨JavaScript语句的执行过程
- [JavaScript] 3.JS 语句
- JavaScript性能优化小知识总结
- javascript输出AscII码扩展集中的字符
- javascript十六进制数字和ASCII字符之间转换
- javascript ASCII和Hex互转
- Javascript复制实例详解
- js让下拉框和文本框联动
- JSONP
- 正则表达式 总结
- 【JSP】--重定向,转发--186 drp