切换文本框时不触发.focusout（）

Question

正如您可以通过图像推断我制作一个非常简单的登录表单。 包含它的div有两个事件处理程序。

$("#signInBox").focusin(function(){
    jQuery('#signInBox').fadeTo( "slow", 1 );
});
$("#signInBox").focusout(function(){
    jQuery('#signInBox').fadeTo( "slow", 0.4 );
});

我遇到的问题是当我从电子邮件更改为密码或反之亦然时，会触发.focusout()和.focusin()。 当从一个文本框更改为下一个文本框时，如何使我的表单不会失去焦点？

Answer 1

使用.parent().length检查事件的触发元素是否不是表单的一部分;如果是return，请保释。请参阅此示例以进行演示：

＆＃13;

＆＃13;

    $("input").focusin(function(event) {
      if ($(event.target).parent('#form').length > 0) return;

      console.log("Fired in");
    });
    $("input").focusout(function(event) {
      if ($(event.target).parent('#form').length > 0) return;

      console.log("Fired out");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <p>Part of the form - should not fire the console.log() on focusin and focusout</p>
  <input type="text" />
</form>

  <p><b>NOT</b> part of the form - <b>should</b> fire the console.log() on focusin and focusout</p>
<input type="text" />

＆＃13;

＆＃13;

＆＃13;