event.stopPropagation(),event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别
1.event.stopPropagation()方法
这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件仍然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,
2.event.preventDefault()方法
这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
3.return false ;
它会同时阻止事件冒泡也会阻止默认事件;连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
1.HTML
<div class="box1">
<a href="http://www.baidu.com" target="_blank"></a>
</div>
2.CSS
.box1{
height: 200px;
width: 600px;
margin: 0 auto;
}
.box1 a{
display: block;
height: 50%;
width: 50%;
background:red;
}
3.JS
1)不阻止事件冒泡和默认事件
$(".box1").click(function(){
console.log("1")//不阻止事件冒泡会打印1,页面跳转;
});
2)阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();//不会打印1,但是页面会跳转; }); $(".box1").click(function(){
console.log("1")
});
3)阻止默认事件
$(".box1 a").click(function(event){
event.preventDefault();//页面不会跳转,但是会打印出1,
}); $(".box1").click(function(){
console.log("1");
});
4)阻止冒泡、阻止默认事件
$(".box1").click(function(){
console.log("1")
});
$(".box1 a").click(function(event){
event.stopPropagation();
event.preventDefault() //页面不会跳转,也不会打印出1
})
等同于:
$(".box1").click(function(){
console.log("1")
});
$(".box1 a").click(function(event){
return false; //页面不会跳转,也不会打印出1,等于同时调用了event.stopPropagation()和event.preventDefault()
});
event.stopPropagation(),event.preventDefault()和return false的区别的更多相关文章
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
- 【转】stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagat ...
- stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault(),return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- 【前端】stopPropagation, preventDefault, return false的区别
e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...
- event.preventDefault() vs. return false
使用jquery方式的话,以下是等效的 return false === event.stopPropagation + event.preventDefault() //1. event.preve ...
- js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...
随机推荐
- 【FTP】FTP服务器的搭建
记录一下FTP服务器的搭建首先打开 程序和功能>打开或关闭Windows功能 进入到Windows功能界面:勾选FTP服务器.然后再在IIS界面,新建一个网站.右键网站,选择“添加到FTP发布” ...
- 11G新特性 -- ASM Fast Mirror Resync
ASM Fast Mirror Resync 在oracle 10g中,如果asm磁盘因为光纤.控制器发生故障而发生failure,asm将无法继续向该磁盘中写入数据. asm会将发生 ...
- 电子证书 DER & PEM & CRT & CER
原文链接: http://blog.csdn.net/zqt520/article/details/26966603 证书与编码 本至上,X.509证书是一个数字文档,这个文档根据RFC 5280来编 ...
- 将csv的数据导入mysql
手头有一份8MB的CSV文件需要分析,对于程序员来说,还有比在数据库里分析更愉快的事情吗? 所以让我们把CSV导入MYSQL吧. 一.首先按照文件列数创建相应的SQL表 例如: DROP TABLE ...
- sonarqube 自动代码审查
1.docker 拉取sonarqube docker pull sonarqube 2.启动docker docker run -d --name sonarqube -p 9000:9000 so ...
- SDL获得屏幕属性及实现分析
[时间:2017-05] [状态:Open] [关键词:sdl2,屏幕分辨率,显示区域,多媒体渲染,窗口,sdl2源码分析] 0 引言 本文的主要目标在于使用SDL2获得屏幕相关的属性,比如分辨率.屏 ...
- Git的使用(一)
最近在解除git的使用,开始觉得git某些地方还是挺方便的. 1.svn的话管理起来是比较方便,可是断网的话,会用不了 2.git的话,管理一些开源的东西比较方便,并且比较好管理日常写的demo程序, ...
- 模仿CountDownLatch类自定义倒时计时器
简介 这里模仿CountDownLatch类自定义到时计时器,利用AQS模板中的尝试获得共享和释放共享 1.MyCountDownLatch package com.jacky; import com ...
- 【iCore4 双核心板】4.3寸液晶模块程序发布
一.说明 1.本资料包程序包含两部分,"CAPTURE"为液晶显示截图,"tft4.3"为ARM程序. 2.此程序只适合iCore4液晶模块. 3.iCore4 ...
- java中的数据加密5 数字证书
数字证书 A用私钥加密了,那么B接受到消息后,用A提供的公钥解密:那么现在有个讨厌的C,他把消息拦截了,然后用自己的私钥加密,同时把自己的公钥发给B,并告诉B,那是A的公钥,结果....,这时候就需要 ...