为何在onblur 事件中调用了alert 和focus 就会出现死循环？

yoshubom 2017-02-20 01:56:05

代码如下，页面中文本框里输入非数字的字符，然后触发onblur 事件，则一直弹出alert()，Safari 和Chrome 都是一样的情况。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form name="frm">

      <label for="age">Please Enter Your Number</label>

      <input type="text" name="age" id="age" onblur="validate(this.value)" />

      <input type="submit" id="Enter" />

  </form>



  <script language="javascript">



    function validate(val) {            

        if(isNaN(val)) {

            alert("XXX XXX XXX");

            document.getElementById("age").focus();

        }

    }



</script>

</body>

</html>

...全文

2457 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

五姐 2018-10-17

打赏
举报

说的好详细呀，佩服

jio可 2017-02-20

打赏
举报

因为一直在失去焦点获取焦点的死循环。。

yoshubom 2017-02-20

打赏
举报

引用 4 楼 alwayslovelin 的回复:

楼上两位的回答太高冷了。。。我来个详细的吧。为什么会发生死循环呢，说白了就是因为JS的异步，JS在执行到alert的时候并不是像你想象的那样先打印，打印完了再聚焦，其实犹豫聚焦动作容易执行，JS先把它给做了，也就是说最后实际的操作是聚焦、打印，这样当然就会再一次触发焦点失去事件了。望采纳~

后来想了想，估计也是先执行了focus，然后再显示alert 结果造成了焦点转移，多谢回复！

yoshubom 2017-02-20

打赏
举报

引用 1 楼天际的海浪的回复:


    function validate(val) {            
        if(isNaN(val)) {
            alert("XXX XXX XXX");
            setTimeout(function () {
   	            document.getElementById("age").focus();
            }, 500);
        }
    }

感谢回复！请问为何用了alert 会不停地触发onblur 事件呢？

alwayslovelin 2017-02-20

打赏
举报

楼上两位的回答太高冷了。。。我来个详细的吧。为什么会发生死循环呢，说白了就是因为JS的异步，JS在执行到alert的时候并不是像你想象的那样先打印，打印完了再聚焦，其实犹豫聚焦动作容易执行，JS先把它给做了，也就是说最后实际的操作是聚焦、打印，这样当然就会再一次触发焦点失去事件了。望采纳~

天际的海浪 2017-02-20

打赏
举报


    function validate(val) {            
        if(isNaN(val)) {
            alert("XXX XXX XXX");
            setTimeout(function () {
   	            document.getElementById("age").focus();
            }, 500);
        }
    }