preventDefault, stopPropagation, return false -JS事件处理中的坑
我们以一个文件上传ui重设计为例子来探讨这几个函数的区别:
其中的html代码如下:
<div class="file-upload">
<input type="file" name="upload-file" class="file-upload__input" style="display: none;" /> <div class="file-upload__drop-zone">
<span class="file-upload__drop-zone-text">Drop files here</span>
<a href="#" class="file-upload__btn--upload">Upload files</a>
</div>
</div>
HTML包含有三部分内容:
1. 一个inpyout空间来处理文件上传的对话.在这里,我们设置为hidden,因为我们并不想使用浏览器默认给出的控件;
2. 一个class为file-upload__dropzone的div元素,它作为主要的"drop zone"拖拽区,如果有代码支持的话,可以直接拖拽文件到这个区域。
3. 一个a元素,它具有file-upload__btn--upload作为其css类,它作为实际的"upload files"按钮,当我们点击它时,就能够打开文件选择对话框
Javascript部分:
function fileUpload() {
document.querySelector('.file-upload__input').click();
} const dropzone = document.querySelector('.file-upload__drop-zone');
const button = document.querySelector('.file-upload__btn--upload'); dropzone.addEventListener('click', fileUpload);
button.addEventListener('click', fileUpload);
js也有三部分组成:
1. 一个fileUpload函数用于触发input元素的click事件
2.div和a元素获取并赋予变量
3.给这几个元素添加事件侦听,当click时就调用fileUpload函数以模拟触发file input的点击
如果我们直接实验,我们会发现很多诡异的行为:当第一个对话框打开并选择文件后,又有第二个会打开
event.preventDefault()
该函数用于阻止浏览器的默认行为(比如当我们点击a标签的时候,自然就打开a中的链接,这个行为就是默认的行为),但是并不会阻止事件的bubbling,也就是说其父亲元素依然会接受到对应该元素的事件
在我们的例子中,当我们点击upload files按钮时,就会调用fileUpload函数,这和我们的预期时一致的。
而作为a标签,其默认行为是引导浏览器nav到href所指定的url中,在这里,我们设置为#,大多数浏览器解释为跳到页面的top处。
而跳转到页面的top处可能并不是我们希望的行为,因此,我们可以通过使用preventDefault方法来阻止这个行为。
通过修改我们的js代码,我们可以阻止a标签的默认行为,但是依然会调用fileUpload函数:
dropzone.addEventListener('click', fileUpload); button.addEventListener('click', (event) => {
event.preventDefault();
fileUpload();
});
这时,虽然点击a标签不再跳转到页面top处,但是文件对话框依然会弹出两次。。。
需要注意的是:
1.preventDefault有继承性,如果在父亲元素的事件处理函数中调用了event.preventDefault,那么子元素对应的event默认行为也将丢失
2.如果希望在子组件中要覆盖这个行为,我们可以通过在子组件的event handler中最后执行 return true; 来恢复!
调试evenyout.preventDefault
有的时候,浏览器的行为非常奇怪,往往就是因为在某些组件上调用过preventDefault函数,而我们又无法知晓是哪个元素身上调用的,这时需要调试。
一个比较好的聪敏的办法是使用类似proxy代理wrapper将event的该函数重新包装:
var oldEPD = Event.prototype.preventDefault;
Event.prototype.preventDefault = function() {
debugger;
oldEPD.call(this);
};
这样的话就会在有该调用时代码停止供我们查找
event.stopPropagation()
这个函数可以阻止发生在子元素上的事件继续向上冒泡,但是不会阻止浏览器的默认行为.
上面的例子中,由于我们点击a元素后,a元素的click handler中会触发对话框,而随后a的click事件继续bubble到上级元素,也就是dropzone,而该dropzone元素也有监听click事件因此就又会被调用fileUpload,这就是为什么文件对话框弹出两次的原因。我们可以通过stopPropagation来阻止事件继续网上冒泡。
我们来看终级解决方案:
dropzone.addEventListener('click', fileUpload); button.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
fileUpload();
});
return false
通常return false这个代码仅仅在jQuery的事件处理函数中有效,对于原生的js代码并无任何影响。
而在jquery的代码中return false又有两个效果:
1. preventDefault
2. stopPropagation
const dropzone = $('.file-upload__drop-zone');
const button = $('.file-upload__btn--upload'); $(dropzone).on('click', fileUpload); $(button).on('click', (event) => {
fileUpload();
return false;
});
最新文章
- Java DNS查询内部实现
- Python 中的虚拟环境
- 我的Java书单之优秀的入门书
- 判断listview是上滑还是下滑的方法
- 1Android系统移植与驱动开发概述
- ADO,OLEDB,ODBC,DAO的区别
- MongoDB 主从复制小实验
- 并查集+二分-hdu-4750-Count The Pairs
- JPA 系列教程12-复合主键-2个@Id+@IdClass
- JS电子文档链接
- JS区分中英文字符的两种方法: 正则和charCodeAt()方法
- 一些android开发实用性网站记录
- EE4218 / EE4216 Faculty of Science and Engineering
- 锋利的jQuery初学(5)
- htm,css,javascript及其他的注释方式
- Kotlin入门(22)适配器的简单优化
- BZOJ3456 城市规划 【多项式求ln】
- Coursera, Deep Learning 5, Sequence Models, week3, Sequence models &; Attention mechanism
- Spark Client启动原理探索
- [No0000FC]C# 预处理器指令
热门文章
- SQLserver创建用户和给用户权限(学)
- 五个常用的CSS简写
- 内置模块:time, datetime, random, json, pickle, os, sys, hashlib, collections, re
- SRDC - ORA-1555 during Export: Checklist of Evidence to Supply (Doc ID 1682706.1)
- 海思Hi3519A MPP从入门到精通(二 系统控制)
- liteos CPU占用率(十六)
- [视频教程] redis中的bit运用统计用户在线天数
- 实时SSH网络吞吐量测试
- 22.Java基础_StringBuilder类
- luoguP3531 [POI2012]LIT-Letters