美文网首页
「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