<!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. 下拉刷新控件(5)SwipeRefreshLayout官方教程(下)响应刷新事件

    http://developer.android.com/training/swipe/respond-refresh-request.html This lesson shows you how t ...

  2. ubuntu10.04共享文件夹

    ubuntu10.04共享文件夹 参考http://jingyan.baidu.com/album/9989c746084c70f648ecfe99.html,共享了home文件夹,然后把共享文件夹映 ...

  3. BZOJ 1507 Editor（块状链表）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1507 题意:一个文本编辑器,模拟以下操作: 思路:块状链表的主要操作: (1)find( ...

  4. [HDOJ1043]Eight（康托展开 BFS 打表）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 八数码问题,因为固定了位置所以以目标位置开始搜索,把所有情况(相当于一个排列)都记录下来,用康托 ...

  5. myeclipes准备工作

    设置jsp中默认编码为utf-8

  6. matlab注释使用，以及相应的注释快捷键

    1.多行注释 单行注释是加% %{ 若干语句 %} 2.快捷键 多行注释: 选中要注释的若干语句, 编辑器菜单Text-<Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释的语 ...

  7. 格式化输出星期几 C#

    string Today = DateTime.Now.ToString("yyyy-MM-dd dddd",new System.Globalization.CultureInf ...

  8. PHP include()和require()方法的区别

    本文总结了PHP的include()和require()两种包含外部文件的方法的不同之处.基本上就是,加载失败的处理方法,性能,以及使用弹性方面的不同. PHP的include()和require() ...

  9. 服务器中判断客户端socket断开连接的方法

    1, 如果服务端的Socket比客户端的Socket先关闭,会导致客户端出现TIME_WAIT状态,占用系统资源. 所以,必须等客户端先关闭Socket后,服务器端再关闭Socket才能避免TIME_ ...

  10. selenium + python 多浏览器测试

    selenium + python 多浏览器测试 支持库包 在学习 Python + Selenium 正篇之前,先来看下对多浏览器模拟的支持.目前selenium包中已包含webdriver,hel ...