<!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. 关于mybatis的参数2个使用经验(类似于struts2的通配所有页面的action配置,xmlsq语句参数类型为基本类型时的快捷指定办法)

    1.我们都知道在struts2中为防止浏览器绕过struts过滤器直接请求页面,所以我们都会配置一个拦截所有页面的action,如下: <action name="*"> ...

  2. linux计划任务运行php文件的方法

    在linux下,借助crontab,设置计划任务每天6点10分执行filename.php文件,写入一行时间到log日志中. 创建计划任务的脚本: dos2unix /path/to/filename ...

  3. Portal Page的呈現

    先看一下在JSR168中提到的Portal page,可以了解一個Portal Page上大概有哪些element: OK...進入本次主題 PSML:PSML的全名是Portal Structure ...

  4. python 去除字符串中连续的空格，并使用其他的分隔符替代连续的空格

    例:1: filt函数用法及匿名函数lamda用法,详见http://www.cnblogs.com/apple2016/p/5657698.html join()用法详见http://www.cnb ...

  5. sql server 关联更新

    update a set a.name1 = b.name1, a.name2=b.name2from 表A a, 表B b where a.id=b.id

  6. [转]如何：在设备上安装 SQL Server Compact 3.5

    将设备连接到计算机,或者将仿真程序插入底座. 有关更多信息,请参见如何:将设备仿真程序插入底座和移除底座. 说明: 计算机上必须已安装了 Windows Mobile Device Center 或 ...

  7. OS开发拓展篇—应用之间的跳转和数据传

    iOS开发拓展篇-应用之间的跳转和数据传 说明:本文介绍app如何打开另一个app,并且传递数据. 一.简单说明 新建两个应用,分别为应用A和应用B. 实现要求:在appA的页面中点击对应的按钮,能够 ...

  8. HDU 5968：异或密码（暴力）

    http://acm.hdu.edu.cn/showproblem.php?pid=5968 题意:中文题意. 思路:一开始不会做,后来发现数据范围很小,而且那个数要是连续的,所以可能把所有情况枚举出 ...

  9. ecshop底部版权修改和组成分析

    我们在ecshop二次开发和ecshop使用过程中,往往需要对ecshop底部进行处理和修改．比如ecshop底部版权问题,ecshop底部程序结构问题．也有很多朋友咨询ecshop底部的一些修改问题 ...

  10. 封装NPOI导出含下拉列表的Excel

    /// <summary> /// 绑定数据的方法 /// </summary> /// <param name="ssfworkbook">H ...