onblur和onclick冲突的解决方法

最新推荐文章于 2022-12-01 00:05:42 发布

原创最新推荐文章于 2022-12-01 00:05:42 发布 · 4.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#onclick #onblur #事件冲突

html 同时被 3 个专栏收录

14 篇文章

订阅专栏

css

12 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

本文探讨了在input输入框绑定onblur事件与确认按钮绑定onclick事件时出现的执行顺序冲突问题。当点击按钮时，input会失去焦点并触发onblur事件，导致onclick事件无法正常执行。文章提供了两种解决方案：一是使用setTimeout延迟onblur执行并在onclick中clearTimeout；二是将onclick替换为onmousedown，避免执行顺序冲突。

场景：input输入框绑定onblur事件，input输入框的确认按钮绑定onclick事件。在点击确认按钮的的同时，input也失去了焦点，所以会触发onblur事件，并且onblur会优先于onclick执行。这就会导致按钮的onclick事件无法正确执行，解决办法有两种：
1.给onblur加settimeout, 然后onclick中cleartimeout。也就是说让onblur延迟一段时间再执行，在这一段时间内onclick会正常执行，并且onclick中的cleartimeout会停止onblur的执行。

var timer;
inp.onblur = function() {
        timer = setTimeout(function() {
        	//onblur事件要执行的代码
   		    some code；
        }, 120); 
    };

btn.onclick = function() {
        clearTimeout(timer);
        //onclick事件要执行的代码
        some code;
    };

2.将onclick替换为onmousedown，

inp.onblur = function() {
    //onblur事件要执行的代码
   	some code；
};

btn.onmousedown = function() {
        //onclick事件要执行的代码
        some code;
    };