一、阻止浏览器默认事件

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. jinja2 宏的简单使用总结(macro)

    Table of Contents 1. 简介 2. 用法 3. 参数和变量 4. 注意事项 4.1. macro的变量只能为如下三种: 4.2. 和block的关系: 5. 参考文档 1 简介 ji ...

  2. 配置mybatis错误总结

    ### The error may exist in SQL Mapper Configuration ### Cause: org.apache.ibatis.builder.BuilderExce ...

  3. C# return dynamic/anonymous type value as function result

    function: public static dynamic GetAppSecret() { //string[] result = new string[] { "", &q ...

  4. CSS3 calc() 会计算的属性

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...

  5. hibernate的formula如何使用

    之前用过hibernate的formula记得很好用,但是这次用到想不起来怎么用了,结果去网上查结果发现大多都是无用信息. 最终搞定了,还是在这里记录一下,省的忘记. 我用formula的目的在于字典 ...

  6. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  7. 李洪强iOS开发Swift篇—07_函数

    李洪强iOS开发Swift篇—07_函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 ...

  8. 李洪强iOS开发之-环信02.2_环信官网下载环信 SDK

    李洪强iOS开发之-环信02.2_环信官网下载环信 SDK 移动客服即时通讯云 iOS SDK 当前版本:V3.1.4 2016-07-08 [ 版本历史 ] | 开发指南 | 知识库 | Demo源 ...

  9. Windows.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:var a =docunment.getElementById("i ...

  10. Android 获取SDCard上图片和视频的缩略图

    获取图片缩略图和视频缩略图的方法: Java代码: import java.io.File; import android.app.Activity; import android.graphics. ...