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');
});

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

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

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

二、解决方案1

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

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

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();
});

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

四、执行顺序探秘

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

总结

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

赞 (0)

相关推荐

  • jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

  • Javascript blur与click冲突解决办法

    解决blur与click冲突 前言: 在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" i

  • 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" id="tel"&g

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

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

    一.现象 最近在开发中碰到了一个需求,具体需求如下图. 这是一个很常见的需求,input框负责在点击回车和失焦的时候确认输入.button负责清除输入,input绑定代码为: input.addEventListener('blur',function(){ console.log('input blur'); }); input.addEventListener('keyup',function(){ console.log('input keyup'); }); "X"绑定的代码为

  • JavaScript中BOM,DOM和事件的用法详解

    JavaScript中BOM,DOM和事件的用法详解

    目录 BOM 概念 对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分 核心DOM模型 HTML DOM 事件监听机制 概念 常见的事件 事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo

  • javascript 中select框触发事件过程的分析

    javascript 中select框触发事件过程的分析

    javascript 中select框触发事件过程的分析 我们书写了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了select上面,模拟客户选择相关事件的触发流程: 最后发现,触发的过程基本上一样,如果没有选择或者选择的是当前显示的option的话,不会触发change事件,只有在选择不同的option时候才会触发change事件.下面是选择了不同的option后触发事件的截图: 我们可以发现,做出改变了

  • JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

  • JavaScript中DOM操作常用事件总结

    JavaScript中DOM操作常用事件总结

    目录 常用事件 演示得到焦点和失去焦点 演示 鼠标划过和离开 点击事件 load加载页面事件 onkeyup 键盘弹起事件 内容变化事件 选中时触发 上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何

  • JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    目录 何为递归 构成递归条件 关于回溯 实际业务 组合问题 何为递归 递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环 构成递归条件 子问题须与原始问题为同样的事,且更为简单

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • JavaScript中匿名函数的用法及优缺点详解

    匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

  • C语言中函数参数的入栈顺序详解及实例

    C语言中函数参数的入栈顺序详解及实例 对技术执着的人,比如说我,往往对一些问题,不仅想做到"知其然",还想做到"知其所以然".C语言可谓博大精深,即使我已经有多年的开发经验,可还是有许多问题不知其所以然.某天某地某人问我,C语言中函数参数的入栈顺序如何?从右至左,我随口回答.为什么是从右至左呢?我终究没有给出合理的解释.于是,只好做了个作业,于是有了这篇小博文. #include void foo(int x, int y, int z) { printf(&quo

随机推荐