<div style="height:30px;line-height:30px;background:#FF0;text-align:center;" id="zz"><a href="http://www.baidu.com">阻止事件冒泡</a></div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
} $('zz').onclick = function(e){
$('zz').innerHTML += ",事件已经点击了!";
var e = e||window.event;
if (e.stopPropagation)
{ e.stopPropagation(); // 阻止冒泡
e.preventDefault(); // 阻止默认事件
}
else
{
e.cancelBubble =true; // 阻止冒泡
e.returnValue = false; // 阻止默认事件
} }
document.documentElement.onclick = function(e){
$('zz').innerHTML += ",冒泡没阻止成功!";
}
</script>
e.preventDefault();  
这句话怎么理解。组织默认事件是什么意思。html元素中有很多元素是具备默认事件的,a标签会跳转,submit会自动提交,reset会重置表单。
e.preventDefault()会阻止这些默认操作。 重要提醒,阻止叶子节点的冒泡意思最大,或者说儿子节点的阻止冒泡比阻止长辈节点的意义更加重大。

JS如何防止事件冒泡的更多相关文章

  1. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  2. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  3. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  5. JS学习之事件冒泡

    (1)什么是事件起泡      首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...

  6. 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS中的事件冒泡——总结

    一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...

  8. JS中的事件冒泡和事件捕获

    事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 用图示表示如下: 1.冒泡事件: ...

  9. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  10. JS如何阻止事件冒泡

      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx. ...

随机推荐

  1. Real mode & Protected mode

    [转]  https://objectkuan.gitbooks.io/ucore-docs/content/lab1/lab1_3_2_1_protection_mode.html 为何要了解Int ...

  2. BZOJ5312 冒险(势能线段树)

    BZOJ题目传送门 表示蒟蒻并不能一眼看出来这是个势能线段树. 不过仔细想想也并非难以理解,感性理解一下,在一个区间里又与又或,那么本来不相同的位也会渐渐相同,线段树每个叶子节点最多修改\(\log ...

  3. 自学Linux Shell3.1-帮助命令man

    点击返回 自学Linux命令行与Shell脚本之路 3.1-帮助命令man 1.man命令概述 默认bash shell提示符是美元符号($),这个符号表明shell在等待用户输入. Linux ma ...

  4. 自学Linux Shell18.1-sed编辑器基础特性

    点击返回 自学Linux命令行与Shell脚本之路 18.1-sed编辑器基础特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. sed概念 sed是stream edito ...

  5. 【BZOJ2142】礼物(拓展卢卡斯定理)

    [BZOJ2142]礼物(拓展卢卡斯定理) 题面 BZOJ 洛谷 题解 显然如果\(\sum w_i>n\)无解. 否则答案就是:\(\displaystyle \prod_{i=1}^m{n- ...

  6. Windows Server 2008配置Network Load Balancing(服务群集)

          最近配置SharePoint 2013 WFE 时,客户提到要让多台WFE能load balance,于是研究了下Network Load Balancing.       当把一台服务器 ...

  7. 使用fiddler模拟http请求

    概述  与httpwath相比,fiddler能模拟http请求.能断点调试.http分析统计吸引了我,使用之后感觉这个工具非常不错,这篇文章只单介绍一下fiddler工作原理,简单介绍一下它的重要功 ...

  8. Luogu 1941 【NOIP2014】飞扬的小鸟 (动态规划)

    Luogu 1941 [NOIP2014]飞扬的小鸟 (动态规划) Description Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度 ...

  9. 【loj3056】【hnoi2019】多边形

    题目 描述 ​ 给出一个 \(n\) 个点的多边形初始的三角剖分: ​ 一次合法的旋转定义为 \((a,b,c,d)\) ,满足 \(a<b<c<d\) : ​ 并且存在边\((a, ...

  10. Linux网络协议栈(一)——Socket入门(1)

    转自: http://www.cnblogs.com/hustcat/archive/2009/09/17/1568738.html 1.TCP/IP参考模型为了实现各种网络的互连,国际标准化组织(I ...