javascript - 带有 <select> 元素的 jQuery focus() 事件的无限循环

Question

我有这个 HTML:

<select id="select-one">
    <option value="">Choose</option>
    <option value="1">House</option>
</select>

<select id="select-two">
    <option value="">Choose</option>
    <option value="A">Table</option>
</select>

还有这个带有 JQuery 的 Javascript

$("#select-two").focus( function() {

    if( $("#select-one").val() == "" ) {
        alert("Fill select-one first!");
        return false;
    }

});

所以我得到了一个带有警报的无限循环，因为在调用 alert() 之后，Javascript 再次将焦点放在同一个选择(选择两个)中。

有人可以帮我解决这个问题吗？

Answer 1

注意:根据您的评论，这假定您必须收听焦点事件。

---

解决方案 1 - 使用 blur() - 在 Chrome 中有效但有问题

理论上，focus 事件是不可取消的，所以 return false 或 event.preventDefault() 在这种情况下将不起作用.但是，在实践中，您可以使用 blur() 方法来反转事件。

例如:

$('#select-two').on('focus',function () {
    if ($("#select-one").val() == "") {
        $(this).blur();
        alert('Fill select-one first!');
        return false;
    }
});

参见 jsFiddle demo

这有效地防止了该字段在 alert 调用后重新获得焦点，因此 focus 事件不会重复。唯一的问题是，在 Chrome 中，即使该字段不再聚焦，下拉菜单仍保持打开状态(参见演示)。

---

解决方案 2 - 使用 remove() 和 clone() - 成本高但跨浏览器

如果 Chrome 的行为有问题，您可以采取更粗略的方法，即从 DOM 中remove() select，clone() 它，然后将它重新插入到 DOM 中。这将有效地完全“重置”select 元素，使其既没有焦点也没有关闭。

例如:

$(document).on('focus','#select-two',function (e) {
    if ($("#select-one").val() == "") {
        $(this).remove().clone().insertAfter('#select-one');
        alert('Fill select-one first!');
        return false;
    }
});

参见 jsFiddle demo

这种方法的好处是它在 Chrome 中也能很好地工作。这种方法的缺点是它涉及为一个非常微不足道的问题操纵 DOM。