javascript - "Click"事件由于 "blur"而未被触发

Question

要重现该问题，请使用 [1] 处的 fiddle 并按照以下步骤操作:

1. 点击文本框

2. 在其中输入一些值

3. 输入值后，单击“单击我”按钮。请注意，不要点击浏览器的其他地方

4. 您会看到“按钮点击”事件没有被触发。

HTML 代码如下所示，

   <div class="wrapper">
    <input type="text" id="input"/>
    <div class="error">There is an error </div>
    </div>
    <button type="button" id="button">Click Me</button>
    <div id="log">Logs</div>

相同的 JavaScript 代码是:

$(function () {
   $("input,button").on("click focus blur mousedown mouseup", function (e) {
     $("#log").append($("<div/>").html(e.target.id + " " + e.type))
     var self = this     
     if (self.id === "input" && e.type=="blur") {
       $(self).trigger("exit")
     }      
   })
   $(".wrapper").on("exit", function () {         
      $(this).find(".error").hide()
      $(this).find(".error").text("")
   })
})

此问题可在“Chrome”和“firefox”中重现。这是“Chrome”中的已知错误还是任何遇到过类似问题的人？

理想情况下，必须触发按钮上的点击事件，但不知何故却没有？我无法理解原因或可能的修复方法。

我不想使用 setTimeout() 来推迟“blur”事件的执行

[1] https://jsfiddle.net/cg1j70vb/1/

Answer 1

这是因为在 input 的 blur 上，您正在删除 error 文本。这会将 button 向上移动(可能是 DOM 重新绘制)，因此错过了 click

我删除了错误消息，它工作正常。

$(function() {
  $("input,button").on("click focus blur mousedown mouseup", function(e) {
    $("#log").append($("<div/>").html(e.target.id + " " + e.type))
    if (this.id === "input" && e.type == "blur") {
      $(this).trigger("exit")
    }
  })
  $(".wrapper").on("exit", function() {
    $(this).find(".error").hide()
    $(this).find(".error").text("")
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <input type="text" id="input" />

</div>
<button type="button" id="button">Click Me</button>
<div id="log">Logs</div>