为什么模糊事件反复触发？有时您无法关闭警报 window

Question

我将 blur 事件绑定到元素 table 中的 showAlert 函数。当光标离开input时，blur事件发生，showAlert函数运行并弹出alertwindow.

有时 alert window 无法关闭。你关闭它，然后它再次弹出，你关闭它，它仍然弹出。我在用 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>

请多次测试，直到出现问题。

Video of the problem with Chrome

我在 Firefox 中遇到同样的问题。

Screenshot of the problem with Firefox

如果不勾选"Prevent this page from creating additional dialogs"框，直接点确定，alertwindow会一直重复弹出。

是什么原因造成的，我怎样才能使这段代码更健壮？

Answer 1

警报消息很难处理，因为它会冻结浏览器，直到您单击它关闭它，这需要您移动鼠标，并且 . . .与模糊一起，当你离开元素时触发（当你点击警告框时发生...） - 这是一个糟糕的组合。

建议：使用 position:fixed; top:0; left:25%; 创建一个简单的 DIV 并将您的消息注入到 HTML 中 div，然后等待用户单击页面上的任意位置以关闭它。用这个来代替提醒功能，你会更开心。

使用 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>

为什么模糊事件反复触发？有时您无法关闭警报 window

Why is the blur event firing repeatedly? Sometimes you can't close the alert window

javascript

events

alert