Javascript 单用户操作触发两个事件-第二个事件不'；t触发器

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

场景：

用户在一个特殊字段中输入一些文本，该字段在调焦输出时修改布局，在输入文本后，不离开该字段，他们单击一个按钮

发生了什么事？

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

我已将其封装在JSFIDLE中：

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

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

编辑：在看到最初的响应后，我深入了解了一些，这里的问题是focusout事件正在改变页面布局，这会稍微向下推按钮的位置。单击事件在focusout完成后触发，但由于按钮不再位于完全相同的位置，因此不会发生任何事情

这是一把最新的小提琴，显示了我的问题

---

这是因为您正在调用

警报

-

聚焦输出

事件会触发，但在浏览器识别您单击按钮之前，警报框会将其阻止

---

将事件处理程序更改为

console.log

或其他非突兀的内容，您会没事的。

我相信这是因为

事件首先触发，执行处理程序，
警报
然后阻止浏览器识别单击

请使用
console.log
而不是
alert
，再试一次-它的侵入性较小。
正如Joe所说，阻塞警报调用是破坏事件的原因。使用非阻塞调用，您将看到这两个事件

但是，如果确实需要执行类似这样的警报，可以使用setTimeout（）将调用“警报”推迟到以后

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

您可能需要重新考虑设计的其他方面。您使用“mousedown”的解决方案是您所能达到的最佳效果，因为它是唯一实际发生的事件。
正是该警报被阻止。
某些浏览器安全性可防止同时触发过多的window.alert

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

使用console.logChanged您的代码将文本添加到页面而不是alerting-works fine@MikeW文本必须实际稍微移动按钮，例如）更改了按钮以执行此操作，并且单击事件不再触发。想一想…看看谢谢，在深入挖掘之后，我看到了实际的问题。我的focusout事件实际上是执行一些自定义事件并处理请求和响应，click事件是提交表单。我认为这个问题实际上可能与页面布局的改变有关。focusout事件发生后，按钮不再位于同一位置，因此click事件不会触发任何事件。让我看看我是否能把它封装在一个新的提琴里。你说的寄存器是什么意思？如果您的意思是没有创建事件处理程序，那么这是不正确的。如果您的意思是浏览器没有识别到发生了单击，则是。你能修改一下以澄清吗？很抱歉造成混淆。我的意思是浏览器无法识别单击事件。我会更新我的答案，让它更清楚。谢谢
$('#theText').focusout(function (){
    $("#focusevent").text("Focusevent");
    console.log("focus");
});

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

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

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

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