【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

时间：2022-03-04 11:37:16

由于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的事件传递是从下到上的：

事件来源对象->上级对象->上上级对象->.....->body->document->window

NS的事件传递是从上到下：

window->document->body->....->事件来源对象实例源码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>event.cancelBubble</title>

<style>

<!--

* {font:menu}

-->

</style>

</head>

<body>

<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>

<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>

</body>

</html>

实例2：

<!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="zh" xml:lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="developer" content="Realazy" />

<title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo　</title>

<style type="text/css" media="screen">

div * {display:block; margin:4px; padding:4px; border:1px solid white;}

textarea {width:20em; height:2em;}

</style>

<script type="text/javascript">

      //<![CDATA[

      function init(){

    var log = document.getElementsByTagName('textarea')[0];

    var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');

    for (var i = 0, n = all.length; i < n; ++i){

     all[i].onmouseover = function(e){

      this.style.border = '1px solid red';

      log.value = '鼠标现在进入的是： ' + this.nodeName;

     };

     all[i].onmouseout = function(e){

      this.style.border = '1px solid white';

     };

    }

    var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');

    for (var i = 0, n = all2.length; i < n; ++i){

       all2[i].onmouseover = function(e){

      this.style.border = '1px solid red';

      if (e) //停止事件冒泡

       e.stopPropagation();

      else

       window.event.cancelBubble = true;

      log.value = '鼠标现在进入的是： ' + this.nodeName;

     };

     all2[i].onmouseout = function(e){

      this.style.border = '1px solid white';};

     }

    }

window.onload = init;

      //]]>

</script>

</head>

<body>

<h1>Bubble in JavaScript DOM</h1>

<p>DOM树的结构是：</p>

<pre><code>

UL

    - LI

       - A

     - SPAN

</code></pre>

<div>

<ul>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<textarea></textarea>

<p> 鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停 （<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的 边。</p>

<div>

<ul>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>

</body>

</html>

【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick的更多相关文章

  1. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

  2. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  3. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  4. chrome 49 版本bug&colon; flex父元素设置flex&colon;1 &comma; 子元素用height&colon;100&percnt;无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  5. css子元素的margin-top为何会影响父元素

    详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...

  6. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  7. 子元素应该margin-top为何会影响父元素【转】

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...

  8. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  9. jquery获取一个元素符合条件的第一个父元素

    closest jQuery 1.3新增.从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素.. closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素 ...

随机推荐

  1. 解决问题：The context cannot be used while the model is being created

    使用Entity Framework (v6.1.3)突然遇到这个问题了,之前一直好好的,怎么破? 此处省略了多次在“好”与“坏"的项目中试验的过程(苦啊),直接给出答案.答案是:没有按Db ...

  2. Issue 7&colon; 网络in action

    网络运维基础 基础参数 配置:IP,子网掩码,网关,dns服务器,dhcp服务器 基础应用 在网关设置上搭建VPN组网 改host文件 单台主机原则上只能配置一个网关 协议 协议是全球都遵守的一套编码 ...

  3. Spotlight的连接设置

  4. &lbrack;ActionScript 3&period;0&rsqb; AS3&period;0和AS2&period;0的相互通信

    AS3和AS2之间的通信,最好的方式可能就是LocalConnection了. AS2向AS3发送数据,即AS2调用AS3的函数: as2.0代码(按钮上写的发送信息代码): on (release) ...

  5. &lbrack;原创&rsqb;java WEB学习笔记49：文件上传基础，基于表单的文件上传&comma;使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. &lbrack;leetcode&rsqb;&lowbar;Path Sum I &amp&semi;&amp&semi; II

    都是考查DFS.经典回溯算法,问题在于我对该类型的代码不熟悉,目前以参考别人的代码,然后加上自己的实现为主,通过类似的题目加强理解. 一.给定一棵二叉树,判断是否存在从root到leaf的路径和等于给 ...

  7. &lbrack;LeetCode&num;249&rsqb; Group Shifted Strings

    Problem: Given a string, we can "shift" each of its letter to its successive letter, for e ...

  8. Nginx&plus;tomcat 做负载均衡

    架构描述 前端一台nginx服务器做负载均衡器,后端放N台tomcat组成集群处理服务,通过nginx转发到后面(注:没做动静分离,静态动态全部都转给tomcat) 优点:实现了可弹性化的架构,在压力 ...

  9. APP启动页

    关于APP启动引导页面模块 时间:2016年6月14日 作者:赵锐 模块使用说明 模块暴露在外的接口是- (void)showGuideViewWithImages:(NSArray *)images ...

  10. PHPCMS实现文章置顶功能的方法

    我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客 ...

相关文章