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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
完美解决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
PHP中几个常用的魔术常量
2012/02/23 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
酒店出纳岗位职责
2013/12/29 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
总账会计岗位职责
2014/03/13 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers