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

Question

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

http://jsfiddle.net/exutahfa/

HTML:

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

jQuery:

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

Answer 1

发生这种情况是因为您实际上并没有关注表单，而是关注它的一个 child 元素(在您的案例中是输入或按钮)。 focusout(或模糊)事件将冒泡到 form 但不会直接由它触发。

您可能想要:

1. 捕获表单输入的blur事件
2. 查看同一表单的另一个子元素是否获得焦点

$('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.

看看表单如何没有在链接的 fiddle 中获得任何焦点:它确实获得了焦点，它会用红色边框突出显示(请参阅 CSS 定义)。