输入焦点取决于 jQuery 更大的父元素答案

【问题标题】：Input focus depending on bigger parent element with jQuery输入焦点取决于 jQuery 更大的父元素
【发布时间】：2012-06-15 09:38:35
【问题描述】：

我想用 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();
});

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

当点击嵌入的input 时，它也会触发ul 点击事件，这是我不想要的。如果直接点击了输入，我如何检测到这种情况？
如果嵌入的input 已经聚焦，并且我点击父ul，它会触发input 的focusout 事件（这将触发验证）并立即再次聚焦它，因为@987654331 @点击处理程序。怎么能检测到这一点而什么也不做呢？因为事实上，从用户的角度来看，关注点并没有改变。
blur 和 focusout 有什么区别？

【问题讨论】：

标签： javascript jquery events dom user-interface

【解决方案1】：

第一个问题：

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

关于您的第三个问题，来自jQuery api 文档：

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

【讨论】：