blur事件与click事件冲突的解决办法

在处理表单登录的过程中,遇到了一个问题,当我们在输入框输入内容输入框获取到焦点时,输入框后面会出现一个图标删除已输入的内容,因此删除图标会绑定一个click事件,但是当我们点击图标的时候,也触发了input的blur事件,blur事件会让input失去焦点时隐藏删除的图标,并且blur事件先于图标的click事件执行,因此这时候点击图标并不会删除输入框已输入的内容,而是图标消失了,那么这个结果就不是我们想要的,那怎么解决这个问题呢?

input.png

我们先看下blur和click事件

blur 事件:当元素失去焦点时触发 blur 事件;早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素,blur 和 focus 事件不会冒泡,其他表单事件都可以。

click 事件:当点击元素时触发 click 事件;所有元素都有此事件,会产生冒泡。

问题产生的原因:

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

解决方法一:如果让 click 事件比 blur 事件先触发就没有问题了,因此可以给 blur 事件加定时器延迟触发

/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
    $(this).prev("input").val("").focus();
}); 
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {    var $this = $(this);
    setTimeout(function(){
       $this.parent().removeClass("active");
       $this.next(".delete-icon").hide();
    },250)
});

缺点:设置多久的延时是一个难以两全的问题,时间太短不能保证click事件的100%触发,时间太长则会造成卡顿的感觉,影响用户体验

解决方法二:将click事件改为mousedown事件,mousedown事件是优先于blur事件执行

/*删除图标的点击事件*/
$(".delete-icon").on("mousedown",function () {
    $(this).prev("input").val("").focus();
});
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {            
    var $this = $(this);
    $(this).parent().removeClass("active");
    $(this).next(".delete-icon").hide();
});

缺点:鼠标按下便触发了事件,不收起、长按也会触发,可能造成用户体验不好

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

/*阻止浏览器默认事件*/
$(".delete-icon").on("mousedown",function(e) {
    e.preventDefault();
})            
/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
    $(this).prev("input").val("").focus();
});           
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {                
    var $this = $(this);
    $this.parent().removeClass("active");
    $this.next(".delete-icon").hide();
});

解决方法四:动态绑定blur事件,当鼠标进入input框父级元素时,移除input绑定事件blur,当鼠标移出输入框父级元素时,给input绑定blur事件

/*动态绑定blur事件*/
$(".login-con li").mouseenter(function(){
    $(this).find("input").unbind("blur");
});
$(".login-con li").mouseleave(function(event){
    $(this).find("input").bind("blur");
});           
/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
    $(this).prev("input").val("").focus();
});           
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {                
    var $(this) = $(this);
    $(this).parent().removeClass("active");
    $(this).next(".delete-icon").hide();
});

推荐使用方法三、方法四



原文链接:HelloWeb前端网 » blur事件与click事件冲突的解决办法 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享