文档章节

js中preventDefault、stopPropagation、return false三者之间

Adam-Lee
 Adam-Lee
发布于 2014/07/17 11:49
字数 585
阅读 757
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

preventDefault:

preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

我们都知道,链接<a>的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:

//假定有链接<a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>

var a = document.getElementById("testA");

a.onclick =function(event){

event.preventDefault();

}

 

stopPropagation:

stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:

<div id='div'  onclick='alert("div");'>

<ul  onclick='alert("ul");'>

<li onclick='alert("li");'>test</li>

</ul>

</div>

上面的代码,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。

当我们需要阻止冒泡时,就得使用stopPropagation了,

<div id='div'  onclick='alert("div");' >

<ul  onclick='alert("ul");'>

<li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>

</ul>

</div>

这时单击”test”,只会提示alert(‘li’);


return false:

现在很多js代码都直接使用jQuery来写,在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。但是使用原生js写时,return false只会阻止默认行为。下面两段代码说明

使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡

<div id='div'  onclick='alert("div");'>

    <ul  onclick='alert("ul");'>

        <li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testB">cnf2e.com</a></li>

    </ul>

</div>

var a = document.getElementById("testB");

a.onclick = function(){

return false;

};

使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡

<div id='div'  onclick='alert("div");'>

<ul  onclick='alert("ul");'>

<li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testC">cnf2e.com</a></li>

</ul>

</div>

$("#testC").on('click',function(){

return false;

});


© 著作权归作者所有

Adam-Lee
粉丝 50
博文 118
码字总数 166965
作品 0
深圳
程序员
私信 提问
JS_stopPropagation, preventDefault 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), prevent...

喵王不瞌睡
2014/12/07
54
0
jQuery事件处理: 别再乱用“return false”了

可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码: view plaincopy to clipboardprint? $("a.toggle").cl...

索隆
2012/09/18
1K
1
深度解析JavaScript事件对象

这篇文章主要介绍了JavaScript事件对象,结合实例形式深入分析了javascript DOM、IE及其他浏览器相关事件对象操作技巧与注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可...

前端攻城小牛
01/16
429
1
jQuery中return false,e.preventDefault(),e.stopPropa

e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jQuery-1.4.1.js" type="text/JavaScript"></script> </head> <body> <table> <tr> <td><span>冒泡事件测试<......

张悟空
2016/04/22
86
0
前端杂谈: DOM event 原理

前端杂谈: DOM event 原理 DOM 事件是前端开发者习以为常的东西. 事件的监听和触发使用起来都非常方便, 但是他们的原理是什么呢? 浏览器是怎样处理 event绑定和触发的呢? 让我们通过实现一个...

ssthouse_hust
2018/11/22
197
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云视频云正式支持AV1编码格式 为视频编码服务降本提效

今天我们要说的 AV1 可不是我们平时说的 .AVI 文件格式,它是由AOM(Alliance for Open Media,开放媒体联盟)制定的一个开源、免版权费的视频编码格式,可以解决H.265昂贵的专利费用和复杂的...

一肥仔
17分钟前
8
0
软件缺陷静态分析 CodeSonar 5.2 新版发布

对于使用C和C++构建安全关键软件的开发团队而言,CodeSonar一直是首选的静态分析解决方案。在近期发行的版本中,CodeSonar通过使用开放标准来扩展其语言覆盖范围,并增加了对Java、C#、Obj...

旋极科技
17分钟前
5
0
数据迁移

1. insert into values 或 insert into select批量插入时,都满足事务的原子性与一致性,但要注意insert into select的加锁问题。 2. replace into与insert into on duplicate key update都可...

qiang123
24分钟前
6
0
Linux装Windows系统后还不会激活?3招教你搞定

     相信大家已经发现荣耀MagicBook科技尝鲜版有多“香”了,不但可以轻松的将Linux系统装回Windows系统,还足足省下了300大洋!但是装回系统就万事大吉了吗?NoNoNo,我们还需要去激活...

梅丽莎好
27分钟前
6
0
Tomcat8源码分析-请求处理过程

上一篇:Tomcat8源码分析-启动流程-start方法 此篇主要讲Tomcat8从接收请求到处理请求的时序图画出来,并用文字描述一下主要流程 时序图 说明 文字描述流程之前先提示如下两点: 1.Acceptor...

特拉仔
29分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部