问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

input blur事件的触发

头像
半夏
    9152026

    clipboard.png
    问题简述：两个input同时绑定了blur事件，在input1触发input2的blur事件时，首先会触发input2的blur，然后紧接着不断触发input1的blur；
    代码如下：
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    input,textarea,button{
        margin:10px;
    }
    </style>
    <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <input type="text" id="inp1"/><br>
    <input type="text" id="inp2" /><br>
    <script type="text/javascript">
    $('#inp1').blur(function(){
        alert($(this).attr('id'));
        return false;
    })
    $('#inp2').blur(function(){
        alert($(this).attr('id'));
        return false;
    })
    </script>
</body>

    </html>

    想请教一下大家有没有好的办法可以实现在这种触发条件下只触发input2的blur，能说明一下这种情况产生的原因或者有相关的资料链接更好，万分感谢~

    javascripthtml5css
    阅读 15.8k
    8 个回答
    得票最新
    头像
    CRIMX
      9.1k2720
      ✓ 已被采纳

      因为你从 inp1 到 inp2 时，inp2 获得 focus，inp1 变 blur，这时弹出了 alert ，当你点击关掉 alert 时离开了 inp2，触发了inp2 的 blur，弹出了新的 alert，而你关掉之前的 alert 之后光标又回到了 inp2。接下来就是死循环。

      头像
      xiaopengji
        6411719

        改成这样<script type="text/javascript">

        $('#inp1').blur(function(){
    console.log($(this).attr('id'));
    
})
$('#inp2').blur(function(){
  console.log($(this).attr('id'));
    
})；再试一试；应该就没问题了；
        头像
        邵长凯
          24639

          应该是alert中断了事件 点击弹窗时有触发了blur 你改成console在控制台输出 就不会出现重复触发blur的问题

          头像
          日暮Ξ途远ελ
            1872918

            这个应该是alert本身的问题，用console.log试过了事件正常触发，应该不影响代码的编写。alert本身也会有bug，没必要纠结~~~~

            头像
            yulusjjc
              40
              头像
              某熊猫桑
                16.1k61547

                只触发input2的blur那不给input1挂事件不就行了么……

                头像
                BackKom
                  583

                  你把alert换成console进行结果验证
                  alert操作会影响焦点情况

                  头像
                  notebin
                    3k149

                    研究了下，终于搞清楚了。我修改了下代码：

                    document.getElementById('input1').onblur = function(){
  alert('blur1')
}
document.getElementById('input2').onblur = function(){
  console.log('blur2')
}
document.getElementById('input2').onfocus = function(){
  console.log('focus2')
}

                    先点击 input1，再点击 input2，会触发 input1 的 blur 事件，点击 Alert 窗口的 OK。后台依次打印出了：

                    // alert("blur1") 点击 OK 后打印
"focus2"
"blur2"
"focus2"

                    发现没，点击弹出框的确定后，input2 触发了两次 focus 事件和一次 blur 事件。也就是说，弹框虽然阻塞了后续代码，但点击弹框仍触发了 blur 事件。如果 input2 的 blur 事件也改为 alert，同样点击弹出框后会再次触发 blur 事件，这就导致弹窗的死循环。

                    至于触发 blur 事件后为什么会再次触发 focus 事件，原因可能与 alert 阻塞和事件实现的机制有关。

                    https://codepen.io/anon/pen/j...

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题