带有元素的jQuery focus（）事件的无限循环

我有这个HTML：

 Choose House   Choose Table  

而这个Javascript与JQuery

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

所以我得到一个带有警报的无限循环，因为在调用alert() Javascript将焦点再次放在同一个select（select-two）中。

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

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演示

这有效地防止了场地在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演示

这种方法的优点是它在Chrome中运行良好。 这种方法的缺点是它涉及操纵DOM以解决一个非常微不足道的问题。

Answer 2

我认为你需要一个额外的事件来改变内容选择 – 当select-one的值有这样的“”时：

HTML

  Choose House   Choose Table  

JS

 $("#select-one").change(function() { if ($(this).val() == "") { $("#select-two").val(""); } }); $("#select-two").focus(function() { if( $("#select-one option:selected").val() == "" ) { alert("Fill select-one first!"); $("#select-one").focus(); return false; } }); 

演示