87,910
社区成员
发帖
与我相关
我的任务
分享为何在onblur 事件中调用了alert 和focus 就会出现死循环？
代码如下，页面中文本框里输入非数字的字符，然后触发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>
...全文
请发表友善的回复…
发表回复
五姐 2018-10-17
- 打赏
- 举报
说的好详细呀，佩服
jio可 2017-02-20
- 打赏
- 举报
因为一直在失去焦点获取焦点的死循环。。
yoshubom 2017-02-20
- 打赏
- 举报
后来想了想，估计也是先执行了focus，然后再显示alert 结果造成了焦点转移，多谢回复！
yoshubom 2017-02-20
- 打赏
- 举报
感谢回复！请问为何用了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);
}
}
