why does alert() break code execution?

Question

When we use alert(), some times the code breaks.

For example:

HTML:

<span>Hi</span>

Javascript:

$(document).ready(function () {

    $("span").dblclick(function () {
        alert("b");
    });
    $("span").click(function () {
        alert("a");
    });

});

The alert("b") doesn't even show up.

But if we change both the alert() to console.log, it is logged.

Alert Demo & console.log Demo

So, what's happening?

Answer 1

alert opens a model dialogue. When it is open, you can't interact with any part of the page except the alert itself.

Since you can't interact with the page, the second half of the double click can't reach the span, so the double click event won't fire.

Answer 2

Using alert() stops all code execution. It would be impossible to capture a double-click if you are already capturing the single click on stopping code execution.

To demonstrate, I've commented out the alert for the single click in your fiddle. You can see HERE that the alert now happens on the double click.