0

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

我还有一个提交按钮，然后，当整个表单填满时，我会在每个输入框上再次运行验证是否有任何错误。

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

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

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

何时发生

当输入错误被更正后，无需单击页面上的任何其他位置，即可立即按下提交按钮。

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

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

重现问题的步骤：

  1. 点击输入框。
  2. 按选项卡按钮（您会在输入框下方看到“输入为空白”消息）。

  3. 现在在这个输入框中输入一些值。

  4. 直接按下提交按钮（确保您没有点击其他任何地方）。提交按钮的 Click 事件不会被触发。第一次点击会被忽略，然后，它会在随后的点击中被触发。

$("#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>

4

1 回答 1

3

我认为这是由于事件顺序的冲突。要click触发事件，mousedown事件必须跟在mouseup事件之后。但是在这里，您的第四个复制步骤之后的事件顺序是mousedown>> foucusout。mouseup所以点击事件永远不会被触发。作为一种解决方法，您可以尝试使用mousedownevent onbutton#submit和 usingsetTimeout以小延迟评估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>

于 2018-12-14T06:02:44.890 回答