强制聚焦于一个元素，但有例外。 （jQuery）

Question

我有两个输入字段。我想强制将焦点放在#area 上，无论用户在哪里单击除非是在#input 上。我已经尝试过类似的方法，但由于输入是文档的一部分，因此它不起作用。

$("#area").focus();
$(document).click(function() { $("#area").focus() };
$("#input").click(function() { $("#input").focus() };

想法？

Answer 1

将其更改为

$("#area").focus();
$(document).click(function() { $("#area").focus() });
$("#input").click(function(e) { e.stopPropagation(); $("#input").focus() });

这将阻止事件冒泡到文档，并且只会被#input捕获

Answer 2

stopPropogation 解决方案比我要建议的更简单，但可能值得讨论这个其他选项。在您拥有的第一个函数中，您可以尝试将第一个参数传递给函数，这是一个 jQuery 规范化事件对象：

$(document).click(function(event) { ...

并测试它以查看事件的 target 属性是否是您的输入:

$(document).click(function(event) {
    if(! (event.target == $("#input").get(0)) )
        $("#area").focus();
}

Answer 3

单击正常输入时，您需要取消事件冒泡，方法是在事件处理程序中返回 false，或者调用 e.stopPropagation()。

我不确定分配事件处理程序的顺序是否重要，但您可以尝试将 #input 事件放在第一位。