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

我有这个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再次将焦点置于相同的select(选择两个)中.

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

解决方法:

注意：根据您的评论,这假设您必须收听焦点事件.

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

从理论上讲,焦点事件是不可取消的,因此在这种情况下,返回false或event.preventDefault()将无效.但是,实际上,您可以使用blur()方法撤消该事件.

例如：

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

查看jsFiddle demo

这有效地防止了警报呼叫后该字段重新获得焦点,因此焦点事件不再重复.唯一的问题是,即使不再关注该领域,Chrome中的下拉菜单仍保持打开状态(请参见演示).

解决方案2-使用remove()和clone()-昂贵但跨浏览器

如果Chrome的行为有问题,您可以采取更粗略的方法,即从DOM中删除()选择,将其克隆(),然后将其重新插入到DOM中.这将有效地完全“重置”选择元素,使它没有焦点并处于关闭状态.

例如：

$(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的一个非常琐碎的问题.

标签：focus,onfocus,javascript,jquery
来源： https://codeday.me/bug/20191031/1974093.html