一、阻止浏览器默认事件

1、先举个例子说什么是　　浏览器的默认事件 ：

比如有一个输入框，当我按下字母a，就会在输入框显示字母a。就是浏览器本该发生的事情。小孩子一出生就会汲取母乳一样的道理，这些都是先天，默认好的了。

2、看个demo，阻止浏览器默认的右键弹出菜单，而且弹出自己自定义的菜单。代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

        #div1

        {

            width:100px;

            height: 100px;

            list-style: none;

            background: #ccc;

            display: none;

            position: absolute;

        }

        </style>

        <script type="text/javascript">

        /*在鼠标按下位置弹出菜单*/

        window.oncontextmenu = function(evt)

        {

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

            var oEvt = evt || event;

            oDiv.style.display = 'block';

            oDiv.style.left = oEvt.clientX +'px';

            oDiv.style.top = oEvt.clientY +'px';

            return false;                   //阻止浏览器默认事件

            document.onclick=function ()                      //当再点击时，设置div1为none

            {

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

                oDiv.style.display='none';

            };

        }

        </script>

    </head>

    <body>

        <div id="div1">

            <ul>

                <li>菜单一</li>

                <li>菜单一</li>

                <li>菜单一</li>

                <li>菜单一</li>

            </ul>

        </div>

    </body>

</html>

return false，阻止了浏览器默认事件，所以当右击鼠标右键时，不会弹出默认菜单， 而是弹出了我自定义的菜单，一个ul列表。

兼容：IE8+，chrome、FF

二、阻止事件冒泡cancelBubble=true

1、举个例子说明什么是事件冒泡

<div id='div' onclick='alert("div");'>

<ul onclick='alert("ul");'>

<li onclick='alert("li");'>test</li>

</ul>

</div>

当我点击test的时候，先会弹出 li ->ul ->div。从下往上冒泡。就比如小鱼儿在海底冒泡，小泡泡从海底往海面冒泡，越来越大。html文档中最后的一个泡是document。

2、下面有个demo，我们经常用到的一个效果，显示/隐藏。当我一点击，div显示，在页面其他位置点击，div消失。以后是代码：

 <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>仿select-事件冒泡</title>

    <style>

    #div1

    {

        width:200px;

        height:200px;

        background:#CCC;

        display:none;

    }

    </style>

    <script>

    window.onload = function()

    {

        var oBtn = document.getElementById('btn1');

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

        /*当点击按钮，div显示，，点击其他地方div隐藏*/

        oBtn.onclick = function(evt)

        {

            var oEvent = evt || event;                            //evt 兼容FF/chrome浏览器

            div1.style.display = 'block';

         oEvent.cancelBubble = true;           //取消事件冒泡（否则点击按钮后，会冒泡到最后一层上即document）

        }

        document.onclick = function()

        {

            div1.style.display = 'none';

            alert('document被点击');

        }

    }

    </script>

    </head>

<body>

<input type="button" value="点击我" id="btn1">

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

</body>

</html>

在需要取消冒泡的地方：加一句oEvent.cancelBubble = true

兼容：IE6，FF，chrome等

三、学习js不仅要知道怎么样，还有要处理浏览器兼容，我晕了，第一个例子没能兼容IE6，再搜搜。学习果然是一场修行

理解阻止浏览器默认事件和事件冒泡cancelBubble的更多相关文章

  1. javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  2. 原生javascript实现阻止浏览器默认行为与阻止事件冒泡

    不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ fu ...

  3. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  4. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

  5. js停止冒泡和阻止浏览器默认行为

    停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C ...

  6. javascript小实例，阻止浏览器默认行为，真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法

    看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...

  7. day49—JavaScript阻止浏览器默认行为

    转行学开发,代码100天——2018-05-04 今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作.比如右键菜单的行为. 阻止默认行为的语句为: return false; 例如,阻 ...

  8. js阻止浏览器默认行为

    js阻止浏览器默认行为 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. JS 阻止浏览器默认行为和冒泡事件

    JS 冒泡事件   首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href=& ...

随机推荐

  1. whoosh使用笔记

    1. whoosh安装 pip install Whoosh 2. 添加索引 第一步:生成schema 第二步:根据schema生成index.index就是一个目录中的一堆文件  (针对某个目录,调 ...

  2. #Leet Code# Populating Next Right Pointers in Each Node II

    描述:注意需要先self.connect(right)再self.connect(left),否则会有case通不过,原因是左边递归执行时依赖与右边的next已经建立,而先执行connect(left ...

  3. python调用Moxa PCOMM Lite通过串口Ymodem协议发送文件

    本文采用python 2.7编写. 经过长期搜寻,终于找到了Moxa PCOMM Lite.调用PCOMM.DLL可以非常方便的通过串口的Xmodem.Ymodem.Zmodem等协议传输文件,而无需 ...

  4. 字符串匹配的python实现

    所有字符串匹配算法的核心问题是,当出现不匹配时,如何向后移动模式串 一.暴力匹配算法 如果要匹配一个字符串s 和一个模式串p,则从i=0开始依次匹配s[i:(i+len(p))],简单粗暴,代码如下: ...

  5. bootstrap-datepicker 日期拾取器

    最近开发的项目界面用的是bootstrap的框架,发现开源的东西真的很多,慢慢的我会记录到上面来 地址  http://www.bootcss.com/p/bootstrap-datetimepick ...

  6. 查找类class所在的jar包

    CTRL+SHIFT+R 意思是输入关键字搜索当前工程的 对象. CTRL+SHIFT+T 输入关键字搜索当前工程的类.

  7. html+css篇

    一,html语义话标签 http://www.html5jscss.com/html5-semantics-section.html

  8. RegexKitLite 使用详解

    1.去RegexKitLite下载类库,解压出来会有一个例子包及2个文件,其实用到的就这2个文件,添加到工程中. 2.工程中添加libicucore.dylib frameworks. 友情提醒:一般 ...

  9. Python的数字类型及其技巧

    Python中的数字类型 int float fractions.Fraction decimal.Decimal 数字的舍与入 int(f):舍去小数部分,只保留整数部分,所以int(-3.8)的结 ...

  10. vs2010 使用SignalR 提高B2C商城用户体验（一）

    vs2010 使用SignalR 提高B2C商城用户体验(一) 1.需求简介,做为新时代的b2c商城,没有即时通讯,怎么提供用户粘稠度,怎么增加销量,用户购物的第一习惯就是咨询,即时通讯,应运而生.这 ...