事件冒泡与默认行为

在说事件冒泡之前，我们先说说事件对象（Event）

Event

在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
所有浏览器都支持Event对象，但支持方式不同
IE中的事件对象：window.event

　　　　　/*

            封装Event对象

            IE：window.event

         */

        function getEvent(event){

            return event?event:window.event;

        }

事件冒泡

什么是事件冒泡

即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点

所有浏览器都支持事件冒泡

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>事件冒泡</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    .one{

        width:400px;

        height:100px;

        border:1px solid #333;

    }

    .two{

        height:35px;

        line-height:35px;

        padding-left:15px;

        border:1px solid red;

    }

    .three{

        padding:10px;

        background-color: green;

        border:1px solid #999;

        cursor:pointer;

    }

</style>

<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script>

    $(function(){

        $(".one").click(function(event) {

            alert($(this).text());

        });

        $(".two").click(function(event) {

            alert($(this).text());

        });

        $(".three").click(function(event) {

            alert($(this).text());

        });

    });

</script>

</head>

<body>

    <div class="one">

        我是one(div)

        <p class="two">

            我是two（p）

            <span class="three">我是three（span）</span>

        </p>

    </div>

</body>

</html>

当在span、p、div元素上各绑定一个click事件，当单击span元素时，会依次触发三个事件，即span、p、div元素上的click事件，这就是事件冒泡，按照DOM层次结构像水泡一样不断向上直至顶端

　　阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行

IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用

/*

         封装事件冒泡函数：

         document.all:判断浏览器是否是IE

         IE：cancelBubble

         Firefox：stopPropagation

        */

        function stopPropagation(e){

             var e = window.event || e;

             if(document.all){

                  e.cancelBubble = true;

             }else{

                  e.stopPropagation();

             }

        }

jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

默认行为

什么是默认行为
1. 网页元素，都有自己的默认行为，例如，单击超链接会跳转...

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用

/*

            封装阻止元素的默认行为函数

            IE：returnValue

            DOM：preventDefault

         */

        function preventDefaultAction(event){

            var event = window.event || event;

            if(document.all){

                //支持IE

                event.returnValue = false;

            }else{

                //IE不支持

                event.preventDefault();

            }

        }

jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

javascript的阻止默认事件和阻止冒泡事件的更多相关文章

简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
js 事件监听冒泡事件
js 事件监听冒泡事件的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...
JQUERY中的事件处理：RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...
js 冒泡事件与解决冒泡事件
事件冒泡 :当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . html代码: <div id="div1"> <div id= ...
js 停止事件冒泡阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
微信小程序--阻止冒泡事件
微信小程序事件的使用方式在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

随机推荐

django 模型增加字段后迁移失败
任务:已有models.py文件中定义了 ad类(用来描述广告数据库表结构).现在想增加四个新字段:ad_show_type,big_video_url,is_full_screen,vi ...
# E. Mahmoud and Ehab and the xor-MST dp/数学+找规律+xor
E. Mahmoud and Ehab and the xor-MST dp/数学/找规律题意给出一个完全图的阶数n(1e18),点由0---n-1编号,边的权则为编号间的异或,问最小生成树是多少 ...
Django_MTV和虚拟环境
1. MVT模型 2. 虚拟环境 """ 1.安装虚拟环境的命令: 1)sudo pip install virtualenv #安装虚拟环境 2)sudo pip in ...
SpringBoot整合mybatis使用pageHelper插件进行分页操作
SpringBoot整合mybatis分页操作 SpringBoot整合Mybatis进行分页操作,这里需要使用Mybatis的分页插件:pageHelper, 关于pageHelper的介绍,请查看 ...
SQL查询语句的执行
执行过程连接器 - 管理连接,权限验证查询缓存 - 命中缓存直接返回结果分析器 - 词法分析 ,语法分析优化器 - 分析执行计划,选择最优的执行计划执行器 - 操作存储引擎接口,返回结果不 ...
CSP2019感想
我觉得自己好弱啊. 想更新博客,可是又没有人看. 本来自己还不算太弱,可是自己越来越腐败. 看看自己,连更新博客的资本都没有了呢.别人写些什么都是经典干货.自己写什么自己都觉得垃圾,只好默默地删掉. ...
android如何让checkbox实现互斥以及android验证端cession登录注意事项
1.CheckBox有一个监听器OnChangedListener,每次选择checkbox都会触发这个事件, 里边有一个参数isChecked,就是判断checkbox是否已经选上了的,可以在这判断 ...
【visio】数据可视化 - 数据展示
本章讲解如何将形状数据展示成数据图像,也就是将添加的属性,展示在图形上 1.数据图形控制面板选中图形>右键>数据>编辑数据图形 2.新建数据图形数据字段:也就是图形的属性显示为 ...
Codeforces Round #598 (Div. 3) F. Equalizing Two Strings
You are given two strings ss and tt both of length nn and both consisting of lowercase Latin letters ...
drf解析模块，异常模块，响应模块，序列化模块
复习 """ 1.接口:url+请求参数+响应参数 Postman发送接口请求的工具 method: GET url: https://api.map.baidu.com ...