Blur event seems to be getting lost if a mousedown event occurring before that delays it

Question

Here's the code:

<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");
}

This works as expected if I type in something in the input and clicks on the div, triggering mousedown before blur. However, if I just put a debugger in myOtherFunction and open the developer tool, the blur event does not get fired and seems to be lost. Is it perhaps because of the 'delay' which occurs while the debugger is on?

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

I've tried it on Chrome for Mac and it works as expected: mousedown -> blur. Which browser/OS do you use? — Tasos, May 08 '20 at 18:58
did you guys try with debuggers on? Just follow the link on the question. @TasosBu I saw this on Chrome on Mac. — ABGR, May 08 '20 at 19:07
Yes I can share a screen recording, but I don't know if it follows the TOC of stackoverflow, I'll try in a new comment below — Tasos, May 08 '20 at 19:11
https://drive.google.com/file/d/1Dq0aB7ISmoxNGTOwomTwSnREuRE2RTDv/view?usp=sharing — Tasos, May 08 '20 at 19:11
Toasos is right. Even I have tried. The mousedown debugger is working first. I have tested the same on mac chrome. — Varun Sharma, May 08 '20 at 19:12
@TasosBu Oops that's weird. Could it be browser's version issue? See this happening on mine: https://drive.google.com/open?id=1qKqYw6KlTq-jqnMHOzURm6hqAzi4Z7_O — ABGR, May 08 '20 at 19:24

score 0 · Answer 1 · edited May 09 '20 at 17:11

0

It's actually a debugger issue on Chrome: if you notice my recording you see that I click the "play" button that appears inside the web app, while in your recording you click the "play" button of the debugger that is inside the developer tools tab. Can you click the in-page "play" that pops when the breakpoint is visited and verify it works as expected?

EDIT: I created an html file to run directly on Chrome with the same code and the problem persists:

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>

I also tried it on Safari and worked correctly.

edited May 09 '20 at 17:11

Christos Lytras

36,310
4
80
113

answered May 08 '20 at 19:43

Tasos

1,880
13
19

I am using windows, on my browser **mousedown** is occurred before **blurr**. also on my firefox browser **blurr** occurred twice. – Zulqarnain Jalil May 08 '20 at 19:55
That is how it should work @ZulqarnainJalil see [Events](https://www.quirksmode.org/js/events_order.html) and [Mouse events](https://www.quirksmode.org/js/events_mouse.html) – Tasos May 08 '20 at 20:00
@Tasos Hmm, that does seem like a debugger issue on chrome. However, I'm still not sure why our `blur` event would just get lost in one case. I mean it must be somewhere in the browser's queue waiting to be executed. How could it simply be discarded? – ABGR May 08 '20 at 20:00
Give me some time @RahulDwivedi I need to check the chromium code – Tasos May 08 '20 at 20:05

score 0 · Answer 2 · answered May 15 '20 at 15:26

Chrome DevTools prevents blur to be fired when debugger is used as it adds an overlay to the page.

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

Also, try to not use alert when debugging as it causes issues with focus/blur.

Blur event seems to be getting lost if a mousedown event occurring before that delays it

2 Answers2