Question

要重现此问题，请使用[1]中的小提琴并按照以下步骤操作：

点击文本框
在其中输入一些值
输入值后，点击＆＃34;点击我＆＃34;按钮。请注意，请勿点击浏览器上的任何其他位置
您会看到＆＃34;按钮点击＆＃34;事件没有被触发。

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("")
   })
})

问题可以在＆＃34; Chrome＆＃34;和＆＃34; firefox＆＃34;。这是＆＃34; Chrome＆＃34;或者任何遇到类似问题的人？

理想情况下，按钮上的点击事件必须被触发但不知何故它不会被触发？我无法理解原因或可能的解决办法。

我不想使用setTimeout（）来推迟＆＃34;模糊＆＃34;事件执行

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

Answer 1

自blur移除input文字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>

Answer 2

我认为这是因为您的错误消息的hide()功能。

我尝试删除它，只是替换错误消息，它的工作原理。 Demo

＆＃34;单击＆＃34;由于＆＃34;模糊＆＃34;

2 个答案: