IE的事件传递-event.cancelBubble示例介绍

关于event.cancelBubble,由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD
Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。
例子：


代码如下:

<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert('tableA')">
<tr onclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr onclick="tableA_rowB_click()">
<td width="106">阻止消息上传</td>
</tr>
</table>
<p>　</p>
</body>
</html>
<!-- -->
<script language="javascript">
<!--
function tableA_rowA_click(){
alert('tableA_rowA');
}
function tableA_rowB_click(){
alert('tableA_rowB');
event.cancelBubble=true;
}
//-->
</script>

event.cancelBubble阻止事件冒泡,event.cancelBubble=true;

取消事件冒泡，在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true;可以停止事件继续上传补充一点，Ie的事件传递是从下到上的：

赞 (0)

相关推荐

  • IE的事件传递-event.cancelBubble示例介绍

    关于event.cancelBubble,由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件. 例子: 复制代码 代码如下: <html> <body> <table border=&

  • 阻止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

  • Pygame Event事件模块的详细示例

    Pygame Event事件模块的详细示例

    目录 事件类型 事件处理方法 处理键盘事件 处理鼠标事件 事件(Event)是 Pygame 的重要模块之一,它是构建整个游戏程序的核心,比如鼠标点击.键盘敲击.游戏窗口移动.调整窗口大小.触发特定的情节.退出游戏等等,这些都可以看做是"事件",Pygame 会接受用户产生的各种操作(或事件),这些操作随时产生,并且操作量可大可小,那么 Pygame 是如何处理这些事件的呢? 事件类型 Pygame 定义了一个专门用来处理事件的结构,即事件队列,该结构遵循遵循队列"先到先处理

  • 关于event.cancelBubble和event.stopPropagation()的区别介绍

    首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器. 先不讲上面是对是错 先看一个例子:(测试环境:chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

  • vue @tap事件之$event用法介绍

    vue @tap事件之$event用法介绍

    目录 vue $event用法 vue奇怪的event对象 event 对象 乌龙 vue $event用法 html <span class="cha mui-badge mui-badge-success fr font14" @tap="Isinspect('普通参数',$event)">查岗</span> js端: function Isinspect(a,event) {       console.log(JSON.stringi

  • jQuery绑定事件的四种方式介绍

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

  • 详细分析Android中onTouch事件传递机制

    详细分析Android中onTouch事件传递机制

    onTach介绍 ontach是Android系统中整个事件机制的基础.Android中的其他事件,如onClick.onLongClick等都是以onTach为基础的. onTach包括从手指按下到离开手机屏幕的整个过程,在微观形式上,具体表现为action_down.action_move和action_up等过程. onTach两种主要定义形式如下: 1.在自定义控件中,常见的有重写onTouchEvent(MotionEvent ev)方法.如在开发中经常可以看到重写的onTouchEv

  • Android事件传递机制

    Android事件传递机制

    实验环境 OS X 10.9 Eclipse(ADT) Android源码版本:API Level 19(Android 4.4) Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和多指操作.所有这些都构成了Android中的事件响应.总的来说,所有的事件都由如下三个部分作为基础: 按下(ACTION_DOWN) 移动(ACTION_MOVE) 抬起(ACTION_UP) 所有的操作事件首先必须执行的是按下操作(ACTIO

  • 深入浅析vue组件间事件传递

    深入浅析vue组件间事件传递

    由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的. 我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间的通信,不仅有props,还有一种事件监听,也是可以通过组件间传递的. 但是,在vue2.+中,vue引入了diff算法和虚拟dom来提升效率.我们知道这些事为了处理频繁更新dom元素所提出的一种优化方案,可频繁变动更新以及事件监听的初始化之间是否会有矛盾,当组件需要变动时,有没有对注册过的事件进

  • Android触摸事件传递机制

    Android触摸事件传递机制

    前言:在Android开发中,经常会遇到触摸事件冲突,比如ViewPager的轮播图跟Fragment的划动事件冲突,或者轮播图跟下拉事件冲突,自定义view的事件处理等,本文章将会详细介绍Activity.View.ViewGroup三者的触摸事件传递机制,传递包括三个阶段:分发.拦截.消费. 本文章将会详细介绍Activity.View.ViewGroup三者的触摸事件传递机制,传递包括三个阶段:分发.拦截.消费. 一.触摸事件的类型 触摸事件对应的是 MotionEvent 类,事件类型主

随机推荐