Question

我遇到了这个问题，用户的单个动作应该触发两个事件，但它只触发第一个事件。

情景：

用户在焦点输出的修改布局的特殊字段中输入一些文字，输入文字后，不离开字段，他们点击按钮。

发生了什么事？

我在文本框上有一个focusout事件，并在按钮上单击事件。我看到的是焦点事件被触发但是点击事件从未发生过。

我把它封装在一个jsfiddle中：

$('#theText').focusout(function (){
    $("#focusevent").text("Focusevent");
    console.log("focus");
});

$('#theButton').click(function (){
    $("#clickevent").text("Clickevent");
    console.log("click");
});

因此，如果您单击文本字段，然后单击我希望触发两个事件的按钮，但我们只看到焦点输出事件。

我通过让mousedown事件触发按钮而不是点击事件（这在焦点输出事件之前触发）来对此进行临时修复，但这导致了一些我不想看到的其他行为和问题。由于那些我认为最佳解决方案是找到一种方法来获得焦点和点击事件。有没有人想过如何解决这个问题？

编辑：看到初步回复后我挖得更深一点，这里的问题是聚焦事件正在改变页面布局，这会略微推动按钮的位置。焦点输出完成后触发click事件，但由于按钮不再位于完全相同的位置，因此没有任何反应。

这是一个更新的小提琴，显示我的问题 http://jsfiddle.net/fCz6X/11/

Answer 1

这是因为您正在调用alert - focusout事件触发，但在浏览器识别出您已点击该按钮之前，警告框会阻止它。

将您的事件处理程序更改为console.log或其他非突兀的内容，您就可以了。

Answer 2

我认为这是因为focusout事件首先触发，执行处理程序，然后alert阻止浏览器识别点击。

使用console.log代替alert再试一次 - 它的侵入性较小。

Answer 3

正如Joe所说，阻止警报呼叫正在破坏事件。使用非阻塞调用，您将看到两个事件。

如果你真的需要执行这样的警告，你可以推迟调用'alert'直到稍后使用setTimeout（）

$('#theText').focusout(function (){
    setTimeout(function() { // alert after all events have resolved
        alert("focus left text box");
    }, 0);
});

编辑：在您更新的小提琴中，点击事件永远不会触发的原因是没有发生点击事件。如果您在mousedown上从鼠标下方移出按钮，则没有后续mouseup启动“click”事件。

您可能需要重新考虑设计的其他方面。您使用'mousedown'的解决方案是您可以实现的最佳解决方案，因为它是实际发生的唯一事件。

Answer 4

正在阻止的警报。某些浏览器安全性会阻止当时触发太多window.alert。

尝试使用其他触发器时，它看起来像。您可以尝试console.log()

$('#theText').on("focusout",function (){
    $("#theText").val($("#theText").val()+"flb");   
});

$('#theButton').on("click",function (){
    $("#theText").val($("#theText").val()+"but");
});

单个用户操作触发两个事件 - 第二个事件不会触发

4 个答案: