偶遇一个onblur事件引起的bug

公司项目出现的一个问题

即用户在文本框中输入数据后 当文本框 失去焦点时会有一个伴随页面请稍等效果的请求 

如果用户输入完数据 直接点击浏览器之外的桌面

当再返回页面时 onblur事件会不断重复触发直到卡死

 

案例:

  a.html 第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<iframe src="C:\Users\13900\Desktop\b.html" frameborder="1"></iframe>
<script>


</script>
</body>

 

 

  b.html  第二个页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" onblur="a();">


<script>

function a(){
alert("文本框失去焦点");
}

window.onblur=function(){
alert("窗口失去焦点");
//document.getElementsByTagName('input')[0].blur();
}
</script>
</body>

 

 

解决办法是:

1.当窗口失去焦点时 让文本框也失去焦点 (这个办法多少还是存在一些问题)

2.在onblur事件触发的请求中不要出现任何页面的alert提示,“请稍等“”类似的页面效果

 

posted @ 2020-10-14 17:55  D·Felix  阅读(250)  评论(0编辑  收藏  举报