<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>event对象的冒泡</title>

</head>

<style>

#pm2 {

    width:250px;

    height:50px;

    border:2px dashed #CCC;

    padding:10px;

    text-align:center;

    line-height:40px;

    margin:0 auto;

}

#box2 {

    width:250px;

    height:70px;

    background:#000;

    text-align:center;

    margin:0 auto;

    padding:10px;

    padding-top:30px;

}

</style>

<body>

<p id="pm2"></p>

<div id="box2">

  <button id="btn2">点击</button>

</div>

<script>

    function stopPropagation(e){

            e = window.event || e;

            if(document.all){ //document.all只支持IE属性 通过判断浏览器种类

                e.cancelBubble = true;

            }

            else{

                e.stopPropagation();

            }

        }

            var _pm2 = document.getElementById("pm2");

            var _box2 = document.getElementById("box2");

            var _btn2 = document.getElementById("btn2");

            _box2.onclick = function (){

                _pm2.innerHTML = "你点击的是:DIV";

                alert(1);

            }

            _btn2.onclick = function (e){

                _pm2.innerHTML = "你点击的是：BUTTON";

                alert(2);

                stopPropagation(e)

            }

       </script>

</body>

</html>

阻止js冒泡的更多相关文章

  1. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

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

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  3. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  4. Js 冒泡事件阻止

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

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

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

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

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

  7. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  8. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  9. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

随机推荐

  1. R语言书籍的学习路线图

    现在对R感兴趣的人越来越多,很多人都想快速的掌握R语言,然而,由于目前大部分高校都没有开设R语言课程,这就导致很多人不知道如何着手学习R语言. 对于初学R语言的人,最常见的方式是:遇到不会的地方,就跑 ...

  2. 作为WEB工程师，我们是不是应该积极的推进一下用户浏览器的使用体验？

    为什么会写这篇文章,其实是有原因的.目前我工作的公司的Web网站仅支持IE8以上的版本,然后我们经常接到客户的反馈,说为什么在他浏览器当中flash怎么显示不了,或者为什么在他浏览器中有这样那样的问题 ...

  3. android 学习随笔二十一（内容提供者 ）

    一.内容提供者* 应用的数据库是不允许其他应用访问的* 内容提供者的作用就是让别的应用访问到你的私有数据* 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查 ...

  4. 【python cookbook】【字符串与文本】7.定义实现最短匹配的正则表达式

    问题:使用正则表达式对文本模式匹配,将识别出来的最长的可能匹配修改为找出最短的可能匹配 解决方法:在匹配模式中的*操作符后加上?修饰符 import re # Sample text text = ' ...

  5. python any()和all()用法

    #any(x)判断x对象是否为空对象,如果都为空.0.false,则返回false,如果不都为空.0.false,则返回true #all(x)如果all(x)参数x对象的所有元素不为0.''.Fal ...

  6. Mac下使用Automator实现隐藏和显示

    本文使用Makdown编辑 通常系统中打开一个文件有好多种方法,编辑也是.例如你要打开OmniGraffle来画个图(suppose you are working on the Mac OS X) ...

  7. Java中常见数据结构：list与map

    1:集合 Collection(单列集合) List(有序,可重复) ArrayList 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector 底层数据结构是数组,查询快,增删慢 线程 ...

  8. 不同版本(2.3,2.4,2.5)的Servlet web.xml 头信息

    Servlet 2.3<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE web-app    P ...

  9. Perl的基本语法<总结> （转载）

    前言:这篇文章是花了我很多时间.费了我很多心血才完成的,虽然连我自己都觉得无法达到尽善尽美的境界,但希望能帮助大家入门,稍微了解到Perl 到底是个什么样的东西,Perl到底有那些强大的功能,那么这篇 ...

  10. Volley的基本用法

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...