js中blur和click事件的冲突

栏目: IT技术 · 发布时间: 4年前

内容简介:问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗原因:这是因为blur事件比click事件先触发,而解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发

问题:当焦点在输入框时,点击取消按钮会触发blur和click事件,导致需要点击两次取消按钮才能关闭弹窗

原因:这是因为blur事件比click事件先触发,而 javascript为单线程,同一时间只能执行处理一个事件 ,所以当blur处理程序时,导致其后续click事件并不会执行

var popover = document.getElementById('popover');
var input = document.getElementById('category-name');
var btn = document.getElementById('btn-cancel');
var error = document.getElementById('error');
 

解决方案1:如果click事件比blur事件先触发就没有问题了,所以可以给blur事件延迟触发

var timer;
 input.onblur = function() {
    timer = setTimeout(function() {
        console.warn('onblur');
        error.style.display = 'block';
    }, 100);
 }
 btn.onclick = function() {
    console.warn('onclick');
    clearTimeout(timer);
    error.style.display = 'none';
    popover.style.display = 'none';
 }

解决方案2:将click事件改为mousedown事件,让其优先于blur事件执行(缺点是用户体验不好,鼠标按下便触发了事件)

 input.onblur = function() {
    console.warn('onblur');
    error.style.display = 'block';
 }
 btn.onmousedown = function() {
    console.warn('onmousedown');
    error.style.display = 'none';
    popover.style.display = 'none';
 }

解决方案3:给按钮添加一个mousedown事件,在其中执行event.preventDefault()阻止浏览器默认事件,这样点击按钮时输入框就不会失去焦点了

input.onblur = function() {
    console.warn('onblur');
    error.style.display = 'block';
}
btn.onmousedown = function(e) {
    console.warn('onmousedown');
    e.preventDefault();
}
btn.onclick = function() {
    console.warn('onclick');
    error.style.display = 'none';
    popover.style.display = 'none';
}
 

参考: https://www.jianshu.com/p/ad8569eaca0c


以上所述就是小编给大家介绍的《js中blur和click事件的冲突》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C程序设计的抽象思维

C程序设计的抽象思维

Eric S.Roberts / 闪四清 / 机械工业出版社 / 2012-5 / 99.00元

Eric S. Roberts所著的《C程序设计的抽象思维》是一本关于C语言的经典图书。本书共计17章,分为4部分,第一部分概述计算机导论课程中涉及的基本编程概念;第二部分讨论递归算法,其中结合大量示例,有助于读者轻松理解和掌握晦涩的概念;第三部分不仅介绍了用非递归算法实现的抽象数据类型,还提供了一些工具,有助于读者理解数据抽象的概念;第四部分重点介绍采用递归算法实现的抽象数据类型。本书重点突出,......一起来看看 《C程序设计的抽象思维》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具