强制关注一个具有异常的元素。 （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事件放在第一位。