<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. 05 自学Aruba之AAA profile无法删除问题

    点击返回:自学Aruba之路 05 自学Aruba之AAA profile无法删除问题 在新建完成AAA profile之后,可能存在后续不需要或者变动,那就要删除多余的AAA profile . 其 ...

  2. 22 Zabbix系统版本升级过程

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix系统版本升级过程 Zabbix升级与其他相类似系统升级一样,前提一定做好备份,备 ...

  3. sql server 小技巧(8) visual studio 2013里使用Sql server compact 4.0及发布问题处理

    1. 安装 Microsoft SQL Server Compact 4.0  https://www.microsoft.com/zh-cn/download/confirmation.aspx?i ...

  4. SharePoint 2007 页面及用户控件

    页面: <%@ Assembly Name="HP.EUSM.Self-ServiceUpgradeQuota.SPCustomAction, Version=1.0.0.0, Cul ...

  5. Logstash grok解析IIS 10.0 日志实例

    Logstash解析IIS日志的核心在于logstash配置文件 IIS 日志位置和格式如下: #Software: Microsoft Internet Information Services 1 ...

  6. (HDU 1542) Atlantis 矩形面积并——扫描线

    n个矩形,可以重叠,求面积并. n<=100: 暴力模拟扫描线.模拟赛大水题.(n^2) 甚至网上一种“分块”:分成n^2块,每一块看是否属于一个矩形. 甚至这个题就可以这么做. n<=1 ...

  7. Hadoop+HBase+Spark+Hive环境搭建

    杨赟快跑 简书作者 2018-09-24 10:24 打开App 摘要:大数据门槛较高,仅仅环境的搭建可能就要耗费我们大量的精力,本文总结了作者是如何搭建大数据环境的(单机版和集群版),希望能帮助学弟 ...

  8. H5新特性之geolocation

    geolocation是H5新增的对象,它用于定位,继承在navigator对象内,以前用navigator只用到userAgent,现在就多了这个geolocation 有2种方法(getCurre ...

  9. JavaSE学习总结(六)——接口、抽象类、内部类

    一.不需要实例化的原因 看一个示例: package com.zhangguo.chapter5.s1; /**动物园*/ public class Zoo { public static void ...

  10. MySQL记录-Lost Connect MySQL Server during query解决方案

    vim /etc/my.cnf ,在[mysqld]下面加上: skip-name-resolve max_allowed_packet = 800M default-character-set=ut ...