如果在此之前发生的 mousedown 事件延迟它，则模糊事件似乎会丢失答案

【问题标题】：Blur event seems to be getting lost if a mousedown event occurring before that delays it如果在此之前发生的 mousedown 事件延迟它，则模糊事件似乎会丢失
【发布时间】：2020-08-10 22:39:33
【问题描述】：

代码如下：

<input type="text" onblur="myFunction()">
<div style="border: 1px solid; width:300px;height:300px" onmousedown = "myOtherFunction()">


function myOtherFunction(){
  console.log("mousedown on div occurred");
}

function myFunction(){
  console.log("blurr occurred");
}

如果我在输入中输入内容并单击 div，这将按预期工作，在 blur 之前触发 mousedown。但是，如果我只是在myOtherFunction 中放置一个调试器并打开开发者工具，blur 事件不会被触发并且似乎丢失了。可能是因为调试器打开时发生的“延迟”？

https://jsbin.com/qevapocovo/edit?html,js,console,output

【问题讨论】：

我已经在 Mac 版 Chrome 上尝试过，它按预期工作：mousedown -> blur。您使用哪种浏览器/操作系统？
这里也一样。无法重现（触发了两个事件）
你们试过调试器了吗？只需点击问题上的链接即可。 @TasosBu 我在 Mac 上的 Chrome 上看到了这个。
是的，我可以分享一个屏幕录像，但我不知道它是否遵循stackoverflow的TOC，我会在下面的新评论中尝试
drive.google.com/file/d/1Dq0aB7ISmoxNGTOwomTwSnREuRE2RTDv/…

标签： javascript dom-events

【解决方案1】：

这实际上是 Chrome 上的调试器问题：如果您注意到 my recording，您会看到我单击了出现在网络应用程序中的“播放”按钮，而在 your recording 中，您单击了调试器的“播放”按钮位于开发人员工具选项卡内。您可以单击访问断点时弹出的页面内“播放”并验证它是否按预期工作？

编辑：我创建了一个 html 文件以使用相同的代码直接在 Chrome 上运行，但问题仍然存在：

function myOtherFunction(){
  debugger
  console.log("mousedown on div occurred")
  alert("mousedown on div occurred")
}

function myFunction(){
  console.log("blurr occurred")
  alert("blurr occurred")
}

<input type="text" onblur="myFunction()">
<div style="border: 1px solid; width:300px;height:300px" onmousedown = "myOtherFunction()"></div>

我也在 Safari 上尝试过，并且工作正常。

【讨论】：

我使用的是 windows，在我的浏览器上 mousedown 发生在 blurr 之前。在我的火狐浏览器 blurr 上也发生了两次。
这就是它应该如何工作@ZulqarnainJalil 请参阅Events 和Mouse events
@Tasos 嗯，这似乎是 chrome 上的调试器问题。但是，我仍然不确定为什么我们的blur 事件会在一种情况下丢失。我的意思是它必须在浏览器队列中等待执行的某个地方。怎么可能简单地丢弃？
给我一些时间@RahulDwivedi 我需要检查铬代码

【解决方案2】：

Chrome DevTools 可防止在使用调试器时触发模糊，因为它会向页面添加叠加层。

见：Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point

此外，调试时尽量不要使用警报，因为它会导致焦点/模糊问题。

【讨论】：