使用 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 在下面的情况下被抑制。

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

发生时

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

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

下面是存在同样问题的示例 Jquery 片段。

重现问题的步骤：

Click on the input box.

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

Now enter some value in this input box.

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>

使用 focusout 和 focusin 以及 Click 事件时无法检测到按钮按下

Not able to detect button press when using focusout and focusin along with Click event

javascript

jquery

click

onclick

focusout