<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

#div1{

    height:200px;

    width:100px;

    border:1px #999999 solid;

    display:none;

    }

</style>

<title>无标题文档</title>

<script type="text/javascript">

    window.onload = function ()

    {

        var obtn = document.getElementById('btn');

        var odiv = document.getElementById('div1');

        obtn.onclick = function (ev)

        {

            var ev = ev || event;

            ev.cancelBubble = true;

            odiv.style.display = 'block';

        }

        document.onclick = function ()

        {

            odiv.style.display = 'none';

        }

    };

</script>

</head>

<body>

<input type="button" id="btn" value="确认">

<div id="div1"></div>

<p>1111111111</p>

</body>

</html>

dom 冒泡事件的更多相关文章

  1. DOM冒泡事件

    一.注册事件的三种方式 1 on的方式 语法: 事件源.on+事件名称 = 事件处理程序 例如: btn.onclick = function(){} 细节: 只能注册一个事件处理函数 兼容: 所有主 ...

  2. 前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  3. Dom捕捉事件和冒泡事件-原理与demo测试

    先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHT ...

  4. w3c标准 dom对象 事件冒泡和事件捕获

    http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...

  5. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  6. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  7. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  8. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  9. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

随机推荐

  1. 第一篇 ERP是什么？-从道的层面浅谈我的理解

    世界上称为ERP软件的软件很多,国外的有SAP,ORACLE,国内的有金蝶,用友,浪潮.这些由不同的厂商开发制作的软件总有其软件适用的场合.这个场合就是企业,而且是市场经济中的企业.个人是不会购买ER ...

  2. python webdriver测试报告

    python webdriver测试报告 即将开始一系列的自动化项目实践,很多公共类和属性都需要提前搞定.今天,解决了测试报告的一些难题,参照了很多博文,最终觉得HTMLTestRunner非常不错, ...

  3. Android 实现布局动态加载

    Android 动态加载布局 通过使用LayoutInflater 每次点击按钮时候去读取布局文件,然后找到布局文件里面的各个VIEW 操作完VIEW 后加载进我们setContentView 方面里 ...

  4. RIA技术

    Rich Internet Application(富互联网应用程序,简称RIA),一种全新的Web应用程序架构,它结合了桌面软件良好的用户体验和web应用程序易部署的优点,很快获得了企业的青睐. 近 ...

  5. laravel, Composer和autoloading

    http://www.php-fig.org/psr/psr-4/ http://www.php-fig.org/psr/psr-0/ http://alanstorm.com/laravel_com ...

  6. R语言实战读书笔记(一)R语言介绍

    1.3.3 工作空间 getwd():显示当前工作目录 setwd():设置当前工作目录 ls():列出当前工作空间中的对象 rm():删除对象 1.3.4 输入与输出 source():执行脚本

  7. R语言AMORE包实现BP神经网络——German数据集

    library(AMORE)data<-read.table('G:\\dataguru\\ML\\ML09\\基于BP网络的个人信贷信用评估\\基于BP网络的个人信贷信用评估\\german. ...

  8. MVC 中使用扩展方法

     扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...

  9. HR免费选人的网站乐跳网上线

    园子里有HR吗? 我们的免费选人的网站乐跳网(http://www.letiao.com)上线了, 免费选人在精英人才榜(http://www.letiao.com/talentwall) 有面试,奖 ...

  10. 07day2

    居然是动规专场.这样不好吧?   采药 [问题描述] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到 ...