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

Input focus depending on bigger parent element with jQuery

本文关键字：元素 jQuery 焦点 取决于 输入      更新时间：2023-09-26

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

某些输入嵌入在较大的父元素中。父元素应该是焦点输入和焦点输出事件的指示器。换句话说：如果用户单击输入的父元素，它应该聚焦输入。

下面是一个演示：

在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的focusout事件（这将触发验证），并立即再次聚焦，因为ul单击处理程序。怎么能检测到这一点，却什么都不做？因为事实上，从用户的角度来看，重点并没有改变。
  3. blur和focusout有什么区别？

对于您的第一个问题：

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

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

当元素或任何元素时，将焦点事件发送到该元素 在里面，失去焦点。这与 它支持检测父元素的焦点丢失（在 换句话说，它支持事件冒泡）。

相关文章：