【javaScript】探讨监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题

最新推荐文章于 2024-06-21 16:11:55 发布

@Umbrella

最新推荐文章于 2024-06-21 16:11:55 发布

阅读量1.8k

点赞数 3

分类专栏：【JavaScript/jQuery】文章标签： input 失去焦点和点击事件的执行顺序

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/98474996

版权

【JavaScript/jQuery】专栏收录该内容

70 篇文章 2 订阅

订阅专栏

1.问题描述

在input输入框输入一段文字之后，点击发送按钮会发现，只触发了失去焦点事件，按钮点击事件并没有被触发，当再次点击按钮的时候，事件才会被触发，这明显不是我们想要的，我们来看看怎么解决

2.代码

<body>
    <div id="divContainer">
        <input class="inTest" autofocus/>
        <button class="btn-send">发送</button>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var inputText = document.querySelector(".inTest");
            var btn = document.querySelector(".btn-send");
            inputText.onblur = function(){
                alert("-----blur----");
     
            };
            btn.onclick = function(){
                alert("-----click----");
            }
        }
    </script>
</body>

3.效果图

在这里插入图片描述
4.解决办法

由于失去焦点事件发生的顺序在点击事件之前，这样我预期的触发点击事件的效果就达不到，为了达到触发点击事件，我在失去焦点时间里面加了setTimeout()方法，让失去焦点事件延迟300毫秒再触发，这样就调换了失去焦点和按钮点击事件的顺序，做到我所期待的效果

5.解决之后的代码

<body>
    <div id="divContainer">
        <input class="inTest" autofocus/>
        <button class="btn-send">发送</button>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var inputText = document.querySelector(".inTest");
            var btn = document.querySelector(".btn-send");
            inputText.onblur = function(){
                var timer = setTimeout(function(){
                    alert("-----blur----");
                },300)     
            };
            btn.onclick = function(){
                alert("-----click----");
            }
        }
    </script>
</body>