Question

当用户没有关注整个表单元素时，我想触发焦点。但是当用户点击任何表单的内部元素（例如文本字段或按钮）时，它不应该触发。但即使事件绑定到整个表单，它也会被触发。如何解决这个问题？

HTML：

<form>
    <input type="text" />
    <button type="button">Click Me</button>
</form>

jQuery的：

$('form').on('focusout', function() {
   alert('focus out');    
});

Answer 1

这是因为您实际上并不关注表单，而是关注其子元素之一（在您的情况下为输入或按钮）。 focusout（或模糊）事件将冒泡到form，但不会直接触发。

您可能想：

在表单输入上捕获blur个事件
查看同一表单中的另一个子元素是否获得了焦点

$('form').on('focusout', function () {
    var $elem = $(this);

    // let the browser set focus on the newly clicked elem before check
    setTimeout(function () {
        if (!$elem.find(':focus').length) {
            alert('focus out');
        }
    }, 0);
});

Working example on JSFiddle.

看看表单在链接的小提琴中没有得到任何焦点：它确实如此，它会以红色边框突出显示（参见CSS定义）。

Answer 2

焦点输出事件不起作用。

来自jQuery文档：

当传递参数时，此方法是.on（“focusout”，handler）的快捷方式，而在没有传递参数时，这是.trigger（“focusout”）的快捷方式。

当焦点事件或其中的任何元素失去焦点时，会将焦点事件发送到元素。这与模糊事件不同，因为它支持检测后代元素的焦点丢失（换句话说，它支持事件冒泡）。

此事件可能会与focusin事件一起使用。

小提琴中的事件被触发的原因是因为它检测到对后代元素的失焦。一般来说，我不认为表单元素本身甚至可以具有焦点，因此调用$('form').blur(function() { alert('focus lost') });将不会执行您希望它执行的操作。但是，您可以对表单上的内部元素使用.blur()，并且如果您要定位特定元素并希望它们都执行不同的操作，则可以使用相同的方式。

就目前而言，一个表单不能有焦点，但它的后代可以，这就是你遇到问题的原因。如果您尝试调用在选择表单时更改表单的事件，则在用户第一次关注表单中的某个输入字段时尝试添加一个类，然后在页面上单击任何其他内容时不在表单中，从表单中删除该类。

Answer 3

您必须专门将焦点应用于您希望它处理的元素，而不是所有表单。例如：

HTML：

<form>
    <input id="focus" type="text" />  
    <button type="button">Click Me</button>
</form>

JavaScript的：

$( "#focus" ).on('focusout', function() {
   alert('focus out');    
});

即使单击子元素，也会触发表单元素上的jQuery focusout事件

3 个答案: