一、阻止浏览器默认事件

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. MVVM Light 一个窗口承载两个视图

    MVVM Light 一个窗口承载两个视图   原文地址:http://www.codeproject.com/Articles/323187/MVVMLight-Using-Two-Views 本文 ...

  2. java 文件类操作（转载）

    11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...

  3. C语言头文件书写

    说一下C语言的存储类说明符: 1.Auto       只在块内变量声明中被允许,表示变量具有本地生存期. 2.Extern    出现在顶层或块的外部变量函数与变量声明中,表示声明的对象具有静态生存 ...

  4. 【python之路6】pycharm的使用

    1.pycharm简介 PyCharm 是我众多python编辑器中比较好的一个.而且可以跨平台,在macos和windows下面都可以用,这点比较好. PyCharm是一种Python IDE,带有 ...

  5. xcode升级后, 插件失效修复

    1. 首先查看 Xcode 的 UUID,在终端执行 defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilit ...

  6. IronPython脚本调用C#dll示例

    上篇Python脚本调用C#代码数据交互示例(hello world)介绍了与C#紧密结合的示例,这里还将提供一个与C#结合更紧密的示例,直接调用C#编写的DLL.      我们还是沿用了上篇文章的 ...

  7. SPRING IN ACTION 第4版笔记-第一章-003-AOP介绍

    一.目标 要在BraveKnight调用embarkOnQuest()前后各做一些处理(调用Minstrel的方法) 二. 1.minstrel.xml <?xml version=" ...

  8. android studio 偶记

    修改项目名称 如果仅仅改了文件夹的名字,则会出现引用问题,相应的如下文件都要做相应的修改: 1. package name 要做相应调整 2. settings.gradle ,中要修改相应的moda ...

  9. POJ_3104_Drying_(二分,最小化最大值)

    描述 http://poj.org/problem?id=3104 n件衣服,第i件衣服里面有水a[i],自然风干每分钟干1个水,用吹风机每分钟干k个水,但是同时只能对一件衣服使用吹风机,求干完所有衣 ...

  10. 简单的API应用

    对于初学系统编程,了解下系统的API是必要的: 下面这个程序实现的是将自身程序复制到windows目录和系统目录: #include<stdio.h> #include<string ...