<!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. [笔记]PHP文件系统处理

    PHP文件系统处理 ***所有的文件处理都是使用系统函数完成的. ***php文件处理 是 基于linux/unix系统为模型的, 在linux下完全没问题 在windows下有一些 有差别. ### ...

  2. php防sql注入

    [一.在服务器端配置] 安全,PHP代码编写是一方面,PHP的配置更是非常关键. 我 们php手手工安装的,php的默认配置文件在 /usr/local/apache2/conf/php.ini,我们 ...

  3. php里session的用法

    PHP中的session默认情况下是使用客户端的Cookie.当客户端的Cookie被禁用时,会自动通过Query_String来传递. Php处理会话的函数一共有11个,我们详细介绍一下将要用到几个 ...

  4. 一个容易被忽略的ReportingService超时问题

    我们在使用Sql Server Reporting Service开发报表的时候,经常会遇到报表超时的问题,报表超时的原因有很多,也有很多地方可以设置报表的超时时间,比如在报表中的数据源(dataso ...

  5. Robotium Recorder的初试

    一.安装 资料来自官方 Prerequisites: Install the Java JDK. Install the Android SDK. The ADT bundle with Eclips ...

  6. linux死锁检测的一种思路【转】

    转自:http://www.cnblogs.com/mumuxinfei/p/4365697.html 前言:  上一篇博文讲述了pstack的使用和原理. 和jstack一样, pstack能获取进 ...

  7. 自动封装Servlet HttpServletRequest请求成为一个POJO对象

    自己写了个小工具类,将Servlet里面的HttpServletRequest请求封装成为一个POJO对象,可以复习一下Java的反射原理,开发中这个没什么用,毕竟都用MVC框架,框架都自带这种功能, ...

  8. 转载WPF SDK研究 之 AppModel

    Jianqiang's Mobile Dev Blog iOS.Android.WP CnBlogs Home New Post Contact Admin Rss Posts - 528 Artic ...

  9. 几个常见的Laravel报错及解决方法

    报错:「Can't swap PDO instance while within transaction」 transactions >= 1) {throw new RuntimeExcept ...

  10. PHP将XML数据转换为数组

    <?php $s=join(,file('httpapi.elong.comxmlv2.0hotelcn0132701501.xml')); $result = xml_to_array($s) ...