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

2016-02-19 09:58 6 1 收藏

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

【 tulaoshi.com - Web开发 】

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 

来源:http://www.tulaoshi.com/n/20160219/1592875.html

延伸阅读
标签: Web开发
在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。JavaScript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果。本文就讨论一下JavaScript中的事件处理,读过之后,您就会知道,很多Ajax框架实现拖动效果的原理了。 一、 IE Event对象 (一)IE Event对象的主要属性和方法 在IE中有一个专门负...
当我们在使用微信等工具,点击扫一扫,就能打开二维码扫描视图。在我们点击屏幕的时候,iphone OS获取到了用户进行了“单击”这一行为,操作系统把包含这些点击事件的信息包装成UITouch和UIEvent形式的实例,然后找到当前运行的程序,逐级寻找能够响应这个事件的对象,直到没有响应者响应。这一寻找的过程,被称作事件的响应链,如下图所示,不...
标签: Web开发
!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" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题 1/t...
标签: Web开发
事件处理概述  事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行...
标签: Web开发
每个JavaScript框架都实现跨浏览器的事件处理,鼓励你摆脱旧式的内联附加事件而使用精简的线性方法。看看清单6的jQuery例子,使用hover事件高亮显示div元素。 清单6:使用jQuery附加hover事件 $('#the-box').hover(function() {    $(this).addClass('highlight'); }, function() {    $(this).removeClass('highli...

经验教程

499

收藏

49

精华推荐

JavaScript事件参考手册

JavaScript事件参考手册

时彩专家张文远

JS教程:给JavaScript文件传递参数

JS教程:给JavaScript文件传递参数

稳妥范er_

JavaScript静态页面值传递:Cookie篇

JavaScript静态页面值传递:Cookie篇

睡不睡还是要睡

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部