如果在这之前发生了mousedown事件，模糊事件似乎会丢失。

Question

这是代码。

<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，就会像预期的那样工作。mousedown 之前 blur. 然而，如果我只是把一个调试器放在了 myOtherFunction 并打开开发者工具，即 blur 事件没有被触发，似乎是丢失了。是不是因为调试器开启时出现了 "延迟"？

https:/jsbin.comqevapocovoedit?html,js,控制台,输出

Answer 1

这实际上是Chrome浏览器上的一个调试器问题：如果你注意到 我的录音 你看，我点击网页应用内出现的 "播放 "按钮，而在 您的录音 你点击开发者工具标签里面的调试器的 "播放 "按钮。你可以点击访问断点时弹出的页内 "播放"，验证一下是否能按预期运行？

EDIT:我用同样的代码创建了一个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上试了一下，工作正常。

Answer 2

Chrome DevTools可以防止在使用调试器时启动模糊，因为它会在页面上添加一个覆盖。

请看。使用Chrome开发者工具调试onFocus事件？断点后无法返回焦点

另外，调试时尽量不要使用alert，因为它会导致焦点模糊的问题。