在 Javascript 中控制事件触发顺序答案

【问题标题】：Controlling event firing sequence in Javascript在 Javascript 中控制事件触发顺序
【发布时间】：2017-11-06 11:25:03
【问题描述】：

这个问题可能听起来有点傻，但我真的无法找到任何具体的解决方案。

我们正在改进现有的遗留应用程序，该应用程序具有大量表单以及与每个表单相关联的许多元素。在大多数情况下，“onblur”事件与一个元素相关联，而“onclick”事件与其他查找相关元素相关联。

旧版应用程序仅在使用模式对话框显示验证消息的 IE 中受支持，该消息用于冻结代码流直到执行用户操作。但在改版后支持 chrome 的应用程序中，模态窗口不适用，并且使用 Promise 模拟了代码流冻结。

新方法现在的问题是当用户在一个元素中输入一些无效数据并尝试单击另一个查找元素时，第一个元素上的“onblur”事件和第二个元素上的“onclick”事件同时触发导致多个窗口（一个用于验证，一个用于查找）有没有办法避免在“onblur”事件触发后发生“onclick”事件触发？是否可以避免并发事件触发？

注意：可能会进行一些调整，例如在第二个元素的“onclick”事件中添加超时和移动验证逻辑来解决此问题。但不幸的是，我无法做到这一点，因为它是一个遗留应用程序，而且要在整个应用程序中完成的更改量很大。

解释问题的示例代码：

<html>
    <head><title>Test</title></head>
    <body>
        <input type="text" onblur='setTimeout(function(){window.open("http://www.google.com", "BlurWindow","");},5000)' /> 
        <input type="button" onclick='setTimeout(function(){window.open("http://www.bing.com", "ClickWindow","");},5000)' value="popup"  />
    </body>
</html>

当我在文本框中键入一些文本并单击弹出按钮时，会触发“onclick”和“onblur”事件。我需要一些方法来处理并发事件触发。可能吗？

【问题讨论】：

“第一个元素上的 'onblur' 事件和第二个元素上的 'onclick' 事件同时触发” 不，它们不是。一个被解雇，然后另一个被解雇。（遗憾的是，它很可能是 click then blur。）主要的 JavaScript UI 线程就是：一个线程。它不能同时做两件事。
"可能会有一些调整，比如在第二个元素的 'onclick' 事件中添加超时和移动验证逻辑来解决这个问题。但不幸的是，我无法做到这一点...... " 那么你是不可能解决问题的。
@T.J.Crowder 感谢克劳德的提示。但不知何故，我通过引入一个全局变量来阻止第二个窗口使用全局标志打开，从而在 IE 中完成了这项工作。但无法在 chrome 中实现这一点，因为两个窗口占用相同的全局标志值并最终打开两个窗口

标签： javascript events event-handling cross-browser dom-events

【解决方案1】：

我们无法控制事件触发的顺序。因此，我们做了一个解决方法来解决这个问题。我们在一个变量中捕获当前焦点元素和任何其他按钮元素的 onclick，如果焦点元素变量不为空，我们将阻止按钮的 onclick 事件触发。

伪代码如下：

捕捉焦点元素：

$(":input[type=text]").on('focusin', function () { window.top.prevFocusField = $(this); });

阻止点击操作：

if (window.top.prevFocusField != null) { return; }

【讨论】：