要重现该问题,请使用 [1] 处的 fiddle 并按照以下步骤操作:
点击文本框
在其中输入一些值
输入值后,单击“单击我”按钮。请注意,不要点击浏览器的其他地方
您会看到“按钮点击”事件没有被触发。
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”事件的执行
最佳答案
这是因为在 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>
关于javascript - "Click"事件由于 "blur"而未被触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41609330/