阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

思源大叔

思源大叔

2016-02-19 09:58

下面请跟着图老师小编一起来了解下阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation),精心挑选的内容希望大家喜欢,不要忘记点个赞哦!
cancelBubble在IE下有效
stopPropagation在Firefox下有效
代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" 
head 
title 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)/title 
meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" / 
script type="text/javascript" 
function doSomething (obj,evt) { 
 alert(obj.id); 
 var e=(evt)?evt:window.event; 
 if (window.event) { 
 e.cancelBubble=true; 
 } else { 
 //e.preventDefault(); 
 e.stopPropagation(); 
 } 

/script 
/head 
body 
div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow" 
 pThis is parent1 div./p 
 div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange" 
 pThis is child1./p 
 /div 
 pThis is parent1 div./p 
/div 
br / 
div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;" 
 pThis is parent2 div./p 
 div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;" 
 pThis is child2. Will bubble./p 
 /div 
 pThis is parent2 div./p 
/div 
/body 
/html 
展开更多 50%)
分享

猜你喜欢

阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

Web开发
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

cancelBubble阻止事件冒泡

Web开发
cancelBubble阻止事件冒泡

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript 事件冒泡

Web开发
javascript 事件冒泡

JavaScript如何给JavaScript文件传递参数

Web开发
JavaScript如何给JavaScript文件传递参数

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

javascript鼠标事件

Web开发
javascript鼠标事件

JavaScript事件驱动及事件处理

Web开发
JavaScript事件驱动及事件处理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JS统计Flash被网友点击过的代码

JS统计Flash被网友点击过的代码

Win8系统安全模式怎么设置

Win8系统安全模式怎么设置
下拉加载更多内容 ↓