`
Nullin
  • 浏览: 25434 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS 事件冒泡 示例代码

JavaScriptXHTMLHTML 
阅读更多

<!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>
<title>JS中的事件冒泡</title>
<script type="text/javascript"><!--
function ClickTr()
{
alert("TR");
}
function ClickTd()
{
alert("TD");
//如果不加下面的代码点击先会弹出TD然后弹出TR，原因是HTML是对象结构当点击AAA的时候（执行）,会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
event.cancelBubble=true;
}

// --></script>
</head>
<body>
<div style="background-color:Azure;" style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
<table>
<tr onclick="ClickTr();">
<td onclick="ClickTd();">AAA</td>
<td>BBB</td>
</tr>
</table>
</body>
</html>

分享到：
| js 获取浏览器高度和宽度值(多浏览器)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    JavaScript中事件冒泡机制示例详析 　DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。　事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，...

    js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

     — 阻止元素的默认事件。 注：a元素的点击跳转的默认事件 ， button，radio等表单元素的默认事件 ， div 元素没有默认事件 例： 代码如下: 百度 代码如下: var samp = document.getElementByTagName(“a”); ...

    JavaScript阻止事件冒泡示例分享

    之前遇到事件冒泡的问题，也去网上搜索了一番，结果大部分都是一样的代码，贴来用时也不太顺利。涉及到FF时，可以用 e.stopPropagation(); ，不知怎地我没用成功。不过我发现FF支持e.cancelBubble = true;的写法，经...

    JavaScript事件冒泡机制原理实例解析

    这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...

    JS html事件冒泡和事件捕获操作示例

    本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考，具体如下： 今天学习了事件冒泡和捕获，记录一下。 1.冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发...

    Js冒泡事件详解及阻止示例

    Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。 如下例所示： 代码如下: &lt;html&gt; [removed][removed] [removed]...

    深入分析js的冒泡事件

    本文通过几段示例代码，给我们深入分析了下javascript的冒泡事件，非常的详细，这里推荐给大家，希望对大家有所帮助

    js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多，想必大家也不会陌生，下面为大家讲解下js冒泡法的使用，感兴趣的朋友可以参考下

    用js闭包的方法实现多点标注冒泡示例

    以下示例在事件监听器中使用了函数闭包将加密讯息分配给一组标记。点击每个标记将会看到加密讯息的一部分，该讯息并不包含在标记本身内。 代码如下: var map; function initialize() { var myLatlng = ne

    Javascript实现鼠标点击冒泡特效

    主要为大家详细介绍了Javascript实现鼠标点击冒泡特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    javascript冒泡排序小结

    冒泡排序示例，双向冒泡排序与对双向冒泡排序稍微的改进的可视化效果。 代码很简单，不知道有木有未知bug。 大神请勿吐槽 冒泡排序示例 var ls=[ 98,13,6,25,38,36,30,44,38,80,61,28,47,34,95,18,85,58,89,85,42,...

    客户端统一验证JavaScript函数库及示例源码

    CancelClientEvent()是使用事件冒泡阻止了事件的继续执行，同时设置返回值，最终成功阻止事件的继续往后执行，当在客户端触发一要回发的按钮事件是，想在程序里结束让其继续执行时，以往则不是很好处理，如Enter键，...

    Javascript 事件流和事件绑定

    事件流 浏览器中的事件流意味着页面上可有不仅一个，甚至多个元素响应同一个事件。而这一个或多个元素响应事件发生的先后顺序在各个浏览器...示例（1）的XHTML代码结构：”cnt0″&gt; 点击我触发冒泡型事件流&lt;/a&gt;&lt;/span&gt;

    JavaScript事件委托的技术原理探讨示例

    事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的，并提供几个纯JavaScript的基本事件委托的例子。...

Magicbox
Global site tag (gtag.js) - Google Analytics