Note:根据您的评论,这假设您必须收听焦点事件。
解决方案 1 - 使用blur()
- 在 Chrome 中有效但有 bug
理论上,focus
活动不可取消,所以return false
or event.preventDefault()
在这种情况下不会有任何影响。然而,在实践中,您可以使用blur()
method.
例如:
$('#select-two').on('focus',function () {
if ($("#select-one").val() == "") {
$(this).blur();
alert('Fill select-one first!');
return false;
}
});
See jsFiddle 演示 http://jsfiddle.net/EuUjr/2/
这有效地防止了视野在alert
打电话,所以focus
事件不再重复。唯一的问题是,在 Chrome 中,即使该字段不再聚焦,下拉菜单仍保持打开状态(请参阅演示)。
解决方案 2 - 使用remove()
and clone()
- 成本高昂但跨浏览器
如果 Chrome 的行为有问题,您可以采取更粗略的方法,即remove()
the select
从 DOM 中,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;
}
});
See jsFiddle 演示 http://jsfiddle.net/29Mvy/1/
这种方法的优点是它在 Chrome 中也能很好地工作。这种方法的缺点是它涉及到为了一个非常微不足道的问题而操作 DOM。