由於“模糊”而未觸發“點擊”事件

Question

要重現該問題，請使用[1]中的小提琴並按照以下步驟操作：

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”中的已知錯誤，還是遇到過類似問題的任何人？

理想情況下，必須觸發按鈕上的click事件，但是不觸發它？ 我無法理解原因或可能的解決方法。

我不想使用setTimeout（）來推遲“模糊”事件的執行

[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> 

Answer 2

我認為是因為您的錯誤消息的hide()函數。

我試圖將其刪除，而只是替換錯誤消息，它可以正常工作。 演示版