js中blur和click事件的冲突

在做表单验证时我们会经常遇到blur和click冲突的情况

举个栗子:

获得焦点
点击取消按钮

问题:当焦点在输入框时,点击取消按钮会触发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';
}

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 1,512评论 0 9
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 502评论 0 3
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 479评论 1 3
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 829评论 2 9
  • 相信你最近也被《欢乐颂2》这部电视剧刷屏了吧?从各大网站,到微信朋友圈,每天都能看到各种最新的讨论,兵哥想不关注都...
    元兵阅读 55评论 0 0