美文网首页
「JS零碎」JS中blur与click和键入冲突解决方式

「JS零碎」JS中blur与click和键入冲突解决方式

作者: acsamson | 来源:发表于2019-03-28 16:22 被阅读0次

在input中的blur事件(也就是移出input点到其他地方的事件)会与你在点击的事件冲突, 例如:

像是上面的例子就会造成点击清除历史记录失效, 因为blur事件优先级大于click

那么怎么解决呢, 可能会想到, 我把blur里面的操作进行延迟:

        function inputBlur(x) {
            // 延迟我要的操作
            setTimeout(blurDelay(),500);
        }
        function blurDelay() {
            document.getElementsByClassName('cover-lay')[0].style.display ='none';
            document.getElementsByClassName('search-history')[0].style.display ='none';
        }

但是这样是行不通的, blur事件的优先级意思是直到我blur事件完成后, click才能开始进行

解决方式: 用mousedown事件来代替click, mousedown优先级大于blur
如果是键盘键入冲突就用keydown, 它的优先级也是大于blur

$(".history-li").on("mousedown",function () {
   ...
});

相关文章

网友评论

      本文标题:「JS零碎」JS中blur与click和键入冲突解决方式

      本文链接:https://www.haomeiwen.com/subject/eoxcbqtx.html