event.stopPropagation(),event.preventDefault(),return false的区别和使用

时间:?2021-10-14阅读:?15

event.stopPropagation(),event.preventDefault(),return false这3个主要跟冒泡事件相关的,首先来看看旺球体育在线的冒泡和事件默认事件如何处理。

区别

1.event.stopPropagation()方法

这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。

例如:如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。

注意:如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

2.event.preventDefault()方法

这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

注意:虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。event是DOM的事件方法,所以不是单独使用,比如指定DOM。

3.return false;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。


实例讲解:

假如有这样一个页面:

<!DOCTYPE>
<html xml:lang="zh" lang="zh">
    <head>
        <title>test js 事件阻止</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/JavaScript" src="http://code.jquery.com/jquery.js"></script>
        $(function(){
           $("#parent").bind('click', fun_p);
           $("#child").bind('click', fun_c);
           $("#lnk").bind('click', fun_a);
        });
        function fun_p(){
            alert('parent');
        }
        function fun_c(){
            alert('child');
        }
        function fun_a(){
            alert('link');
        }
    </head>
    <body>
      <div id="parent">
          <div id="child">
            <a href="#" id="lnk">旺球体育在线教程</a>
          </div>
      </div>
    </body>
</html>

浏览器中打开html文件,点击其中的link("旺球体育在线教程"),依次执行以下操作:

  1. 触发link的click事件alert('link')
  2. 向上传递click事件到父元素div(id为child的div),触发此div的click事件alert('child')
  3. 继续传递click事件到父元素div(id为parent的div),触发此div的click事件alert('parent')
  4. 执行link的默认动作,即跳转到旺球体育在线教程

下面我们来修改一下代码

修改一:在function fun_a里追加一行return false;

function fun_a()
{
    alert('link');
    return false;
}

浏览器中打开html文件,点击其中的link("旺球体育在线教程"),依次执行以下操作:

  1. 触发link的click事件alert('link')

上面的2,3,4步被阻止了

修改二:在function fun_a里追加一行event.preventDefault():

function fun_a()
{
    alert('link');
    event.preventDefault();
}

在浏览器中打开html文件,点击其中的link("旺球体育在线教程"),依次执行以下操作:

  1. 触发link的click事件alert('link')
  2. 向上传递click事件到父元素div(id为child的div),触发此div的click事件alert('child')
  3. 继续传递click事件到父元素div(id为parent的div),触发此div的click事件alert('parent')

link的默认动作被函数[preventDefault()]阻止了

修改三:function fun_a里追加一行event.stopPragation():

function fun_a()
{
    alert('link');
    event.stopPropagation();
}

在浏览器中打开html文件,点击其中的link("旺球体育在线教程"),依次执行以下操作:

  1. 触发link的click事件alert('link')
  2. 执行link的默认动作,即跳转到旺球体育在线教程

向上传递事件被函数[stopPragation()]阻止了

修改四:在function fun_a里追加两行event.preventDefault()和event.stopPragation()

function fun_a(){
    alert('link');
    event.preventDefault();
    event.stopPropagation();
}

在浏览器中打开html文件,点击其中的link("旺球体育在线教程"),依次执行以下操作:

  1. 触发link的click事件alert('link')

与修改一种的结果一样,说明了return false;是包含了preventDefault和stopPragation两个功能的。


总结:

e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播
e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为
returne false; //阻止两者(e.preventDefault()和e.stopPropagation())


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10737

Web旺球体育在线小白入门

Web旺球体育在线开发怎么入门,主要都有哪些要素组成?Web旺球体育在线开发是由网页制作演变而来的,主要由HTML,CSS,JavaScript三大要素组成。专业的Web旺球体育在线开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下。

巧妙利用引用,将数组转换成树形数组

笔者所做的一个项目需要做一个旺球体育在线的树形菜单,后端返回的数据是一个平行的list,list中的每个元素都是一个对象,例如list[0]的值为{id: 1, fid: 0, name: 一级菜单},每个元素都指定了父元素,生成的菜单可以无限级嵌套

Js原型与原型链详解

与大部分面向对象语言不同,ES6之前并没有引入类(class)的概念,JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前,我们有必要先复习一下构造函数的知识。

为什么不建议使用 index 作为 key 值

使用 index 作为 key 值有什么问题呢? 在我们日常开发中我们经常会和 key 值打交道. 但是我们扪心自问, 真的理解 key 吗? 我想大多数朋友可能会有些许犹豫.

forward和redirect的区别?http状态码301,302分别代表什么?

从地址栏显示来说:forward是服务器内部重定向,客户端浏览器的网址不会发生变化;redirect发生一个状态码,告诉服务器去重新请求那个网址,显示的的新的网址数据共享:forward使用的是同一个request

怎么解决js异步方法执行顺序

一个foo发出异步请求的函数,如何从返回响应/结果?尝试从回调中返回值,并将结果分配给函数内的局部变量并返回该变量,但这些方法都没有真正返回响应(它们都返回undefined或变量的初始值)。

一行CSS实现全站中文简繁转换

而在Windows系统中的几个默认字体都没有包含繁体变体,而OS X,也就是iMac或者 Mac Pro,以及iOS系统,也就是苹果手机,iPad等设备的默认中文字体是包含繁体变体的。

JavaScript中的switch语句

JavaScript语言中的条件语句,除了if 语句,还有switch 语句。switch 常用于根据不同的条件执行不同的操作。虽然它和 if 语句都是用来判断条件的语句,但是它们之间还是有不同。

15 分钟学会 Immutable

Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。主要原理是采用了 Persistent Data Structure(持久化数据结构),就是当每次修改后我们都会得到一个新的版本

旺球体育在线PDF文件转图片方法

先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的,html代码添加两行代码,一个是canvas用来绘图,一个是img用来最后展示转换后的pdf图片

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu