为什么警报框在以下代码中不断触发?

Question

>我有以下HTML代码：

function presence_check(elem) {
if ($(elem).val() === "") {
alert("Please enter something");
$(elem).focus();
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Don't leave this textbox blank" onblur="presence_check(this)">
<input type="text" placeholder="Secon input box">

如果文本框为空，代码应该提醒用户并重新关注元素，但相反，它会持续触发 onblur 事件。我看到一些答案说，当警报框弹出时，它会删除对元素的焦点，从而触发 onblur 事件。但是，我不明白这怎么可能，因为在元素已经失去焦点后调用 alert(( 函数

Answer 1

问题是因为在blur上显示了alert()。然后，您将焦点放回元素，以便在用户单击对话框中的按钮时再次触发blur，从而形成无限循环。您可以在此小提琴的控制台输出中看到这种情况

这是一个典型的例子，说明为什么你不应该在任何系统中使用alert()- 即使是出于调试目的。使用实际的 HTML 元素向用户显示警告，并console.log()或console.dir()进行调试。下面是如何执行此操作的示例：

$('input.validate').on('blur input', function() {
var $message = $(this).next('.validation-message');
if (this.value.trim() === "") {
$message.show();
this.focus();
} else {
$message.hide();
}
});

.validation-message {
display: none;
color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" placeholder="Don't leave this textbox blank" class="validate" />
<span class="validation-message">Please enter something</span>
</div>
<div>
<input type="text" placeholder="Second input box" />
</div>

我还强烈建议您在无效时不要强制焦点回到字段，因为它会阻止用户在您的页面中执行任何其他操作，这是糟糕的用户体验。

当你这样做时，JS可以简化为这样：

$('input.validate').on('blur input', function() {
$(this).next('.validation-message').toggle(this.value.trim() === '');
});