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

Question

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

场景：

用户在 focusout 上修改布局的特殊字段中输入一些文本，输入文本后，不离开该字段，他们单击按钮。

发生了什么？

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

我已经将它封装在一个 jsfiddle 中：

http://jsfiddle.net/fCz6X/13/

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

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

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

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

编辑：在看到最初的回应后，我挖得更深一点，这里的问题是 focusout 事件正在改变页面布局，它非常轻微地将按钮的位置向下推。聚焦完成后会触发 click 事件，但由于按钮不再位于完全相同的位置，因此没有任何反应。

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

Answer 1

这是因为您正在调用alert - 触发了focusout 事件，但在浏览器识别您点击了该按钮之前，警报框将其阻止。

将您的事件处理程序更改为 console.log 或其他不引人注目的东西，您会没事的。

Answer 2

这是阻塞的警报。 某些浏览器安全性可防止同时触发过多的 window.alert。

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

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

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

Answer 3

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

使用console.log 而不是alert 再试一次 - 它的侵入性较小。

Answer 4

正如乔所说，阻塞警报调用是破坏事件的原因。使用非阻塞调用，您将看到这两个事件。

但是，如果您确实需要执行这样的警报，您可以推迟调用 'alert' 直到稍后使用 setTimeout()

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

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

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