how does the browser tell the difference between user click and programmatic click?

Question

If I initiate a click with jquery which does window.open(), it is blocked by pop up blocker, If I do the click manually the window is not blocked. How does the browser differ between the two?

Scrimp

Here's a jsfiddle to demonstrate. It'll try to popup on page load but get blocked. Calling the click event programmatically causes it to get blocked but if you call it within another click event it goes through. – Patrizius

Answer 1

The Firefox implementation of this is discussed at length on this bug, and this other bug has some further interesting background, including what lengths sites will go through in order to foist an unwanted popup window on unsuspecting users (in this case: calling window.open() from within an image load event). If you search around Bugzilla you'll find that the Mozilla people took a number of years to get this all working correctly, for example here's a bug from 2001.

The way it works currently is this: When Firefox receives a click event from the operating system, for a certain amount of time window.open() is enabled in JavaScript (look for dom.disable_open_click_delay in about:config). If you call the click() event from code without a user click occurring then the first step, the enabling of window.open() never occurs, though the call to window.open() will itself succeed to stop sites detecting that you have popup blocking enabled.

I'm not sure how other browsers implement this stuff but it would be surprising to me if it was much different.

Coronograph

Answer 2

I believe that calling click via jQuery actually doesn't really trigger a click on the element, but instead calls the function listening to the click. So although you are calling click() you are actually just calling a function.

When the user clicks, it is a real click.

Example:

var handler = function () {
    alert('hi');
};

$('#example').on('click', handler);
$('#example').click(); // really just calls handler();

Logarithm

Is that also true of the native javascript .click()? – Antimissile

Interesting thing to note: If you, as the user, do anything that results in the click code being executed, it still does. This includes clicking on something that calls the click event. Or even a key press event can call it and it'll work. – Patrizius

It is hard to predict how the browser implements this check as there is nothing in the specification to dictate when the user should be prompted. w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361 – Logarithm

"really just calls handler()" - Well, that's not entirely true. jQuery will pass an event object to the handler function if you do the $('#example').click(); i.e. if your handler is var hadler=function(e){ /*e is an event object here*/ } – Camarena

Answer 3

The browser's native code handles the actual mouse click event (from the operating system) and creates the browser event object. At that point in the browser's native code, the browser knows that this event was created by a real mouse click.

My guess would be that there is some hidden data (not accessible from javascript) attached to the event which lets the browser keep track of whether the event was initiated via a real mouse click or not though there could be other implementation mechanisms too.

Synecdoche

Answer 4

The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().

https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

Blisse