javascript - 使用 focusout 和 focusin 以及 Click 事件时无法检测按钮按下情况

Question

我正在使用focusout和focusin我的应用程序中输入字段上的事件。 当focusin时，我的脚本检查输入框是否有验证错误。/focuseout事件发生；因此，相关错误消息会显示在输入框下方，说明用户输入中的问题。

我还有一个提交按钮，后记，当整个表单填写完毕后，我会在每个输入框上再次运行验证以检查是否有错误。

所以，我附加了 3 个事件，1. focusout 2. focusein events 3.<button> submit button (Click) events 。

注意到当 focusout and click事件同时被触发 click event在下面的情况下被抑制。

请注意，如果仅打印消息[用于调试目的]，则一切正常。但是当我进行一些 DOM 操作时 [从 focusout 内部]方法]，例如在div中添加类或在输入框下方插入span等。--第一次点击事件未被检测到。

何时发生

When the input error is corrected and immediately, without clicking anywhere else on the page, the submit button is pressed.

只有当按钮被点击两次时才会检测到点击事件。

下面是具有相同问题的示例 Jquery 代码段。

重现问题的步骤:

1. Click on the input box.
2. Press the tab button(you would see "input is blank" message below the input box).

3. Now enter some value in this input box.

4. Press the submit button directly (make sure you don't click anywhere else). the Click event of submit button is not fired. The first click is just ignored, then, It gets fired on subsequent clicks.

$("#submit").click(function(event){
    if(null != $("#watch").val() && $("#watch").val() != ""){
    $(".error-msg").text("inside submit: good to submit");
  }else{
  $(".error-msg").text("inside submit: submit done");
  
  }
  
});

$("#watch").focusout(function(event){
if(null != $("#watch").val() && $("#watch").val() != ""){
  $(".error-msg").html("inside focusout only");
$('.test1').css('display','none');
 $('.test1').addClass('testing');

}else{
  $(".error-msg").html("input is blank");
  $('.test2').addClass('testing');
}



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test1">test1</div>

<input id="watch" type="text"  placeholder="My input"/>
<div class="error-msg"></div>



<button id="submit" type="text">submit</button>

Answer 1

我认为这是由于事件顺序冲突造成的。要触发 click 事件，mousedown 事件后面必须跟着 mouseup 事件。但这里的第四个重现步骤之后的事件序列是mousedown > foucusout > mouseup。所以点击事件永远不会被触发。 作为解决方法，您可以尝试在 button#submit 上使用 mousedown 事件，并使用 setTimeout 来评估 mousedown 处理程序稍微延迟才能产生所需的结果。

$("#submit").mousedown(function(event) {
  setTimeout(function() {
    if (null != $("#watch").val() && $("#watch").val() != "") {
      $(".error-msg").text("inside submit: good to submit");
    } else {
      $(".error-msg").text("inside submit: submit done");
    }
  }, 50);
});

$("#watch").focusout(function(event){
if(null != $("#watch").val() && $("#watch").val() != ""){
  $(".error-msg").html("inside focusout only");
$('.test1').css('display','none');
 $('.test1').addClass('testing');

}else{
  $(".error-msg").html("input is blank");
  $('.test2').addClass('testing');
}



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test1">test1</div>

<input id="watch" type="text"  placeholder="My input"/>
<div class="error-msg"></div>



<button id="submit" type="text">submit</button>