这是代码。
<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
事件没有被触发,似乎是丢失了。是不是因为调试器开启时出现了 "延迟"?
这实际上是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上试了一下,工作正常。
Chrome DevTools可以防止在使用调试器时启动模糊,因为它会在页面上添加一个覆盖。
请看。使用Chrome开发者工具调试onFocus事件?断点后无法返回焦点
另外,调试时尽量不要使用alert,因为它会导致焦点模糊的问题。