0

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

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

这是一个演示：

jsFiddle 上的演示

在演示中，第一个输入被 a 包围，ul它是可点击的，并导致底层输入聚焦。第二个输入被 a 包围，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级，它会触发的 focusout 事件input（这将触发验证）并由于ul单击处理程序而立即再次聚焦它。怎么能检测到这一点而什么也不做呢？因为事实上，从用户的角度来看，关注点并没有改变。
  3. blur和有什么区别focusout？
4

1 回答 1

2

对于你的第一个问题：

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

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

当某个元素或其中的任何元素失去焦点时，会将 focusout 事件发送到该元素。这与 blur 事件不同，它支持检测父元素失去焦点（换句话说，它支持事件冒泡）。

于 2012-06-15T09:44:53.527 回答