在 Javascript 中控制事件触发顺序

Question

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

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

遗留应用程序仅在 IE 中受支持，它使用模态对话框显示验证消息，用于冻结代码流，直到执行用户操作。但是在具有 chrome 支持的改进后的应用程序中，模态 windows 不适用，代码流冻结是使用 promises 模仿的。

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

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

Sample code to explain the problem:

<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' 事件都会被触发。我需要一些方法来处理并发事件触发。可能吗？

Answer 1

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

伪代码如下：

要捕获焦点元素：

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

要阻止点击操作：

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

在 Javascript 中控制事件触发顺序

Controlling event firing sequence in Javascript

javascript

events

cross-browser

event-handling

dom-events