事件冒泡与默认行为

在说事件冒泡之前，我们先说说事件对象（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 ...

随机推荐

input如何上传文件
1)绑定input[type='file']的change事件 <input @change="uploadPhoto($event)" type="file&qu ...
Java爬虫学习（2）之用对象保存文件demo（1）
package com.mieba.spider; import java.util.ArrayList; import java.util.List; import java.util.Vector ...
while、for循环结构_python
一.while循环的基础例子: 例子1:判断是否大于50 例子2:按需打印乘法口诀例子3:无限循环 while True: print (“true”) 二.for循环 1.for循环的常见范围的用 ...
[lua]紫猫lua教程-命令宝典-L1-01-10. 自定义函数
L1[function]01. 定义与调用函数函数的定义和概念没什么可说的 lua的函数声明和调用是有先后顺序的先声明后调用函数就是变量的一种所以可以自由的把函数在变量间相互赋值不过注 ...
Jenkins - 基于 Docker 的 Jenkins 安装
概述安装 Jenkins 基于 Docker 这个有点水一发的性质... 场景学习 Jenkins 第一步, 当然是安装但是安装的方法很多 Jenkins 是基于 Java 的所以是个 ...
Tex 一些命令
1. [!htp] 可以使这个内容跟随在前面的内容后面假如前面是一段文字,后面是一幅图像,不知什么原因跑到其他地方去了.这时加个[!htp]可以使他紧紧跟在后面 ergdsgagdfgdfgfgaf ...
pikachu平台搭建
1.将pikachu转移至htdocs 2.然后打开pikachu文件夹里的inc文件夹 3.里面对应的内容该成之前刚刚设置好的数据库服务器地址,用户名,密码和端口号 4.打开浏览器,输入http:/ ...
2019 徐州网络赛 center
题意:n个点,求最小加上几个点让所有点关于一个点(不需要是点集里面的点)中心对称题解:双重循环枚举,把中点记录一下,结果是n-最大的中点 #include <bits/stdc++.h> ...
shell批量创建数据表的一个方法
#!/bin/bash #批量新建数据表 #删除`符号,具体原因我也没搞懂 for i in {1..30};do mysql 地址 -u账号 -p密码 -e "use 库名;CREATE ...
Android学习10
SharedPreferences 今天练习了利用SharedPreferences保存登录用户名密码: layout布局: <?xml version="1.0" enco ...