Javascript事件排队：在父onclick之前以模糊方式排队的XHR响应

对于以下测试用例（我将XHR调用替换为setTimeout，以表示响应非常快的XHR调用）：

我希望父onclick处理程序在setTimeout事件之前已经排队。至少在Chrome中，它不是。此行为是由标准指定的还是由实现指定的？我还对总是在超时（或XHR）处理程序之前运行父onclick处理程序的变通方法感兴趣

---

在我的实际用例中，这个问题是有问题的，因为根据XHR请求运行的时间长短，不能保证事件以相同的顺序排队

这对解决实际的XHR问题不一定有帮助，但我想我知道发生了什么。为了方便起见，我使用jQuery扩展了您的示例代码：

<div class=parent>Label: <input class=field></div>

该代码所做的是按事件实际发生的时间对事件进行排序。在输入字段中单击并聚焦后单击文本的情况下，具有短超时（小于100ms左右）的顺序为

焦点

穆斯敦

模糊

计时器

鼠标

点击

“blur”和“timer”事件用于输入字段及其

setTimeout（）

回调。如果我延长超时时间间隔，比如150ms左右，那么

焦点

穆斯敦

模糊

鼠标

点击

计时器

---

我认为这是有道理的：“mousedown”和“mouseup”事件是由您与鼠标按钮的实际物理交互驱动的。在收到“mouseup”之前，“click”事件没有意义。使用“模糊”处理程序中的短计时器，计时器可以在鼠标通过操作系统等物理地传递“向上”事件之前触发。

您对

setTimeout（）

的调用不正确。您没有传递函数，而是将调用的返回值传递到

console.log（）

。感谢您指出这一点。我犯了一个新手错误，把它提炼成一个测试用例。我修复了它，排队问题仍然存在。setTimeout不是实际问题。这不是重复的。好的，仔细看一下，我认为这可能是

console.log（）

异常。现在我不这么认为了。我对代码做了一些修改，这样它就不会直接依赖于

console.log（）

输出顺序，而且仍然很奇怪。我正在用Firefox进行测试，就好像浏览器需要大约100毫秒才能确定“事件队列”文本上的“单击”事件需要在

上触发一样。如果

setTimeout（）

延迟大于100（大于或小于），那么事情的发生顺序就更有意义了。无论如何，我不确定“点击”（当然是在触发“mousedown”和“mouseup”之后）是否会在任何给定点发生。换言之，尽管这种行为出乎意料，但很难明确地说它是错的。啊：也许是这样的：“点击”在“鼠标点击”发生之前无法触发，当然，除非你是一个工业机器人，否则你的鼠标按钮在按下和返回之间有一段短暂的时间。父对象上的“focus”事件首先触发，然后触发“mousedown”。在任何情况下，

上的“模糊”都会紧跟在“鼠标向下”之后。谢谢！在阅读HTML规范时，它似乎没有精确地指定相对于鼠标事件触发焦点事件的时间。你的测试很有意义，也解释了我所看到的。这似乎是合理的，重点将发生在鼠标下降。

onblur
onblur timeout
onclick parent

<div class=parent>Label: <input class=field></div>

var $d = $(document);

var t = {
  mousedown: -1,
  mouseup: -1,
  focus: -1,
  click: -1,
  blur: -1,
  timer: -1
};

["mousedown", "mouseup", "focus", "click"].forEach(function(event) {
    $d.on(event, ".parent", function() {
    t[event] = Date.now();
  })
});
$d.on("blur", ".field", function() {
    t.blur = Date.now();
  setTimeout(function() {
    t.timer = Date.now();
  }, 150);
});
$d.on("click", ".parent", function() {
    setTimeout(function() {
    var race = Object.keys(t).sort(function(k1, k2) { return t[k1] - t[k2];});
    console.log("Result: ", race);
    race.forEach(function(key) { t[key] = -1; });
  }, 1000);
});