使用jQuery根据更大的父元素输入焦点

Question

我想用jQuery做输入验证。每次用户模糊输入时，都应该进行验证。验证不是问题，它是重点部分。

某些输入嵌入在较大的父元素中。父元素应该是focusin和focusout事件的指示符。换句话说：如果用户点击输入的父元素，它应该集中输入。

这是一个演示：

DEMO on jsFiddle

在演示中，第一个输入被ul包围，可以单击并导致基础输入聚焦。第二个输入被div包围，它什么都不做。观察控制台的输出。

以下是从演示中获取的标记。的 HTML ：

<ul>
<li>
    <input type="text" class="embed" />
</li>
</ul>

<div>
    <input type="text" class="normal" />
</div>​

的JavaScript ：

$('input').focusin(function(event) {
    console.log('input.' + $(this).attr('class') + ' focusin');
});

$('input').focusout(function(event) {
    console.log('input.' + $(this).attr('class') + ' focusout');
    // either here or in blur:
    // now i want to do some validation and display errors if there are any
});

$('input').blur(function(event) {
    console.log('input.' + $(this).attr('class') + ' blur');
    // either here or in focusout:
    // now i want to do some validation and display errors if there are any
});

$('ul').click(function(event){
    console.log('ul click');
    $('input.embed').focus();
});
​

目前这些是我的问题和疑问：

1. 点击嵌入式input时，它还会触发我不想要的ul点击事件。如果直接点击输入，我怎样才能检测到该事件？
2. 如果嵌入式input已经集中，我点击了父ul，它会触发input的焦点事件（这将触发验证）并立即将其聚焦再次因为ul点击处理程序。如何检测到这一点，什么都不做？因为事实上，从用户的角度来看，焦点并没有改变。
3. blur和focusout之间的区别是什么？

Answer 1

关于你的第一个问题：

$('ul input.embed').click(function(event){
    event.stopPropagation();
});

关于第三个问题，请从jQuery api文档：

  

当焦点输出事件或任何元素发送到元素时   在里面，失去焦点。这与模糊事件不同   它支持检测父元素的焦点丢失（in   换句话说，它支持事件冒泡。