偶遇一个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提示,“请稍等“”类似的页面效果