| 以文本方式查看主题 - ╋艺 镇╋ (http://wdystv.com/bbs/index.asp) -- ┣◇网站建设&Web语言 (http://wdystv.com/bbs/list.asp?boardid=4) ---- JS冒泡事件解决方案 (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=2690) |
| -- 作者：admin -- 发布时间：2011/1/7 17:12:25 -- JS冒泡事件解决方案 何为冒泡事件。 就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。 消除冒泡事件的方法 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation） 下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果 《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble if (window.event) { e.cancelBubble=true; } else { //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation e.stopPropagation(); } } 《/script> 《body> 《p>This is parent1 div.《/p> 《div id=“child1“ onclick=“alert(this.id)“ style=“width:200px;background-color:orange“> 《p>This is child1.《/p> 《/div> 《p>This is parent1 div.《/p> 《/div> 《br /> 《div id=“parent2“ onclick=“alert(this.id)“ style=“width:250px;background-color:cyan;“> 《p>This is parent2 div.《/p> 《div id=“child2“ onclick=“doSomething(this,event);“ style=“width:200px;background-color:lightblue;“> 《p>This is child2. Will bubble.《/p> 《/div> 《p>This is parent2 div.《/p> 《/div> 这就是冒泡事件 但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果. [此贴子已经被作者于2011-1-7 17:17:47编辑过]
|
| -- 作者：admin -- 发布时间：2011/1/7 17:18:25 -- 原帖地址： http://www.fydir.com/Home/article/399/1.aspx?RouteExistingFiles=False&Count=23 |