Detect if the event was triggered by the user or via script

Question

I need to detect if the event (click) was triggered by the user or method trigger jQuery.

Analyzing the parameter event found two properties I could use for this check: when the event is triggered via trigger the object has the property isTrigger and when the user triggers the event, the object has the property originalEvent.

The question is, are these solutions standard jQuery api or can they be changed in future versions? Which one should I use?

Answer 1

Vanilla Javascript

We can observe the properties of the object event associated with it, particularly those that record the click coordinates.

If the click was triggered programmatically, they will be at zero.

If the click was made by the user, it will contain the coordinates of the location where the click occurred relative to the screen.

For this purpose, we make use of the properties clientX and clientY:

if (e.screenX && e.screenX!=0 && e.screenY && e.screenY!=0) {
    // clique real, realizado por um humano ou um robô que usa o rato
}
else {
    // clique programático
}

Example

var myButton = document.getElementById("meuBotao");

// se receber clique, debitar para a consola o objeto `event`
myButton.onclick = function(event) {
  console.log(event);
}

// disparar o clique manual (vai ser o primeiro a aparecer na consola)
myButton.click();

<button id="meuBotao">clica-me</button>

jQuery event.isTrigger

With jQuery, starting with version 1.7, framework of the same deals with this problem and defines a property in the object of the click event to signal if the click was performed programmatically:

// Linha #4521 do ficheiro http://code.jquery.com/jquery-1.11.2.js
event.isTrigger = onlyHandlers ? 2 : 3;

There is no official documentation for this property, and jQuery forum there is still no definitive answer to the question.

If we look at the source code of version 1.7 of jQuery where we first saw this property:

// Linha #3141 do ficheiro http://code.jquery.com/jquery-1.7.js
event.isTrigger = true;

It can be seen that there are differences, giving us to understand that ownership is more for internal control of own framework and may change in future versions.

In short, it can be concluded that we should not consider this property as viable for the purpose of detecting the origin of the click being preferable a solution in Vanilla Javascript.

jQuery event.originalEvent

Anyway, we have the object event.originalEvent which will be set only if the click occurred by a mouse or touch:

$('button').on('click', function (event) {
    if (event.originalEvent === undefined) {
        // clique programatico
    }
    else {
        // clique rato ou touch
    }
});

This object contains what the object event contains, and is attached only if the event was triggered by mouse or touch.

Let’s say it’s a copy of the original event because the framework needs to manipulate numerous properties and so can do it without disturbing the normal functioning of objects and properties that we are used to in Javascript:

Some events may have specific properties for them. These can be accessed as object properties event.originalEvent.

^{Citation in the documentation for Event Object}

As this object is documented, it is already advised to use it given terms some guarantee that it will not change suddenly and without notice or portability.

Answer 2

isTrigger is attribute to true in the body of the method trigger(), then it is guaranteed that this property will always exist and will always be true if the event was triggered via trigger(). Test if (event.isTrigger) { ... } is enough and will always result in expected behavior - separate user events from programmer events.

OBS: originalEvent always points to the native event created by the browser, which suggests that this property will always be undefined when the event is triggered via trigger() - but the documentation does not guarantee this behavior.