Question

我将blur事件绑定到元素showAlert中的table函数。当光标离开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>

请测试几次，直到问题发生。

Video of the problem with Chrome

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

Screenshot of the problem with Firefox

如果您没有选中“防止创建其他对话框来阻止此页面”框，只需单击“确定”，alert窗口将永远反复弹出。

是什么原因造成的？如何使代码更健壮？

Answer 1

警报msg难以使用，因为它会冻结浏览器，直到您单击关闭它为止，这需要您移动鼠标，然后按。。。加上模糊效果，当您离开元素时会触发模糊效果（当您单击警报框时会发生这种情况）-这是一个糟糕的组合。

建议：使用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>

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

1 个答案: