Javascript中click与blur事件的顺序详析


Posted in Javascript onApril 25, 2017

一、现象

最近在开发中碰到了一个需求,具体需求如下图。

Javascript中click与blur事件的顺序详析

这是一个很常见的需求,input框负责在点击回车和失焦的时候确认输入。button负责清除输入,input绑定代码为:

input.addEventListener('blur',function(){
 console.log('input blur');
});
input.addEventListener('keyup',function(){
 console.log('input keyup');
});

"X"绑定的代码为:

button.addEventListener('click', function(e){
 console.log('button click');
});

尝试着执行代码,并按照先输入再点击按钮取消的操作,结果如下:

Javascript中click与blur事件的顺序详析

可以看到,input blur在button的click之前触发了,这就导致取消操作其实并没有起到作用。

同时,也能发现事件的执行顺序为(input-blur) -> (button-click);

二、解决方案1

最简单的解决方案为:将button的时间换成onmousedown事件,可以得到如下结果:

Javascript中click与blur事件的顺序详析

事件顺序正确了,但是这种解决方式有两个问题:

     a)无法在按下按钮后取消点击

     b)控制blur是否执行,需要额外的代码

那么有木有进一步解决方案呢?

三、解决方案2

对button同时绑定mousedown和blur事件即可,具体代码和执行结果如下:

button.addEventListener('mousedown', function(e){
 console.log('button mousedown');
 e.preventDefault();
});
button.addEventListener('click', function(e){
 console.log('button click');
 input.blur();
});

Javascript中click与blur事件的顺序详析

这样的方式,就克服了第一种方案的两个弊端,也完美的解决了需求。

四、执行顺序探秘

查询w3c标准后,没有发现关于blur和mousedown,click的顺序说明。根据猜测,blur需要mousedown执行默认事件来触发。所以总结事件顺序应为:mousedown->(other)blur->mouseup->click

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
js实现返回顶部效果
Mar 10 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 #Javascript
ES6中Math对象新增的方法实例详解
Apr 25 #Javascript
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
深入理解Javascript中的作用域链和闭包
Apr 25 #Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 #Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 #Javascript
You might like
Yii的Srbac插件用法详解
2016/07/14 PHP
php图片添加水印例子
2016/07/20 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
JavaScript 中的六种循环方法
2021/01/06 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
深入理解python多进程编程
2016/06/12 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
校园活动策划书范文
2014/01/10 职场文书
购房意向书
2014/04/01 职场文书
教师评语大全
2014/04/28 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
工作感言一句话
2015/08/01 职场文书
公开致歉信
2019/06/24 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python