一、阻止浏览器默认事件

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. Entity Framework Code First 数据迁移

    需要在[工具 --> NuGet 程序包管理器 --> 程序包管理器控制台]中输入三个命令: Enable-Migrations (初次迁移时使用) Add-Migration [为本次迁 ...

  2. Install SharePoint 2013 on Windows Server 2012 without a domain

    Any setup of Team Foundation Server is not complete until you have at least tried t work with ShareP ...

  3. C++返回引用的函数

    要以引用返回函数值,则函数定义时的格式如下: 类型标识符&类型名 (形参列表及类型说明) { 函数体 } 用const限定引用的声明方式为: const 类型标识符&引用名=目标变量名 ...

  4. 第 5 章 工厂方法模式【Factory Method Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 女娲补天的故事大家都听说过吧,今天不说这个,说女娲创造人的故事,可不是“造人”的工作,这个词被现代人滥用了.这个故事是说 ...

  5. [Jquery] js获取浏览器滚动条距离顶端的距离

    需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小  一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...

  6. 解决iOS应用内购买报错:invalidProductIdentifiers

    当写完IAP业务过程后,点击测试却发现没有返回成功的商品Id,反而返回了无效的商品:response.invalidProductIdentifiers 这种情况下考虑以下因素: 创建的App ID是 ...

  7. 【USACO 2012 Open】Running Laps（树状数组）

    53 奶牛赛跑 约翰有 N 头奶牛,他为这些奶牛准备了一个周长为 C 的环形跑牛场.所有奶牛从起点同时起跑,奶牛在比赛中总是以匀速前进的,第 i 头牛的速度为 Vi.只要有一头奶牛跑完 L 圈之后,比 ...

  8. 【CF】323 Div2. D. Once Again...

    挺有意思的一道题目.考虑长度为n的数组,重复n次,可以得到n*n的最长上升子序列.同理,也可以得到n*n的最长下降子序列.因此,把t分成prefix(上升子序列) + cycle(one intege ...

  9. jQuery选择器上下文

  10. 单实例 winform zz

    (引用了 Microsoft.VisualBasic.ApplicationServices)SingleInstanceApplicationWrapper.cs using System.Wind ...