我将blur事件绑定到元素table中的showAlert函数。当光标离开input时，blur事件发生，showAlert功能运行并弹出alert窗口。
有时alert窗口无法关闭。你把它合上，然后它再次弹出，你把它关上，它仍然弹出。我在用Chrome对下面的网页进行了至少50次测试后得出了这个结论。这个问题并不是每次都会发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>goods1</td>
<td><input type='text' name="goods1"></td>
</tr>
<tr>
<td>goods2</td>
<td><input type='text' name="goods2"></td>
</tr>
</table>
</form>
<script>
ob = document.getElementsByTagName("table")[0]
function showAlert(event) {
ob = event.target;
alert(ob.tagName);
}
ob.addEventListener("blur", showAlert, true);
</script>
</body>
</html>
请测试几次，直到问题出现。
Chrome 问题的视频
我在Firefox中遇到了同样的问题。
Firefox 问题的屏幕截图
如果您没有选中"阻止此页面创建其他对话框"框，只需单击"确定"，alert窗口将永远重复弹出。
造成这种情况的原因是什么？我如何使此代码更加健壮？
警报消息很难处理，因为它会冻结浏览器，直到您单击它关闭，这需要您移动鼠标，然后。再加上模糊，当你离开元素时会触发(当你点击提醒框时会发生…(，这是一个糟糕的组合。
建议：用position:fixed; top:0; left:25%;创建一个简单的DIV，并将您的消息注入到该DIV的HTML中，等待用户点击页面上的任何位置将其关闭。用它来代替警报功能，您会更高兴。
使用jQuery的快速演示(很抱歉使用jQuery，但我没有时间翻译它——这只是一个例子，而不是解决您问题的代码(
$('#mybutt').click(function(){
var mymsg = "<i>Here is a sample message. Click on <b>me</b> to close.</i>";
$('#msg').html(mymsg);
$('#msg').show();
});
$('#nuther').click(function(){
var mymsg = "<div id='nuth'>Here is another message. Click on <b>me</b> to close.</div>";
$('#msg').html(mymsg);
$('#msg').show();
});
$('#msg').click(function(){
$('#msg').hide();
});#msg{position:fixed;top:10%;left:25%;padding:10px;text-align:center;}
#msg{font-size:1.3rem;background:bisque;z-index:2;display:none;}
#nuth{color:dodgerblue;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg"></div>
<button id="mybutt">Click me</button>
<button id="nuther">Nuther button</button>