Check if event is triggered by a human

Question

I have a handler attached to an event and I would like it to execute only if it is triggered by a human, and not by a trigger() method. How do I tell the difference?

For example,

$('.checkbox').change(function(e){
  if (e.isHuman())
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert

Answer 1

You can check e.originalEvent: if it's defined the click is human:

Look at the fiddle http://jsfiddle.net/Uf8Wv/

$('.checkbox').change(function(e){
  if (e.originalEvent !== undefined)
  {
    alert ('human');
  }
});

my example in the fiddle:

<input type='checkbox' id='try' >try
<button id='click'>Click</button>

$("#try").click(function(event) {
    if (event.originalEvent === undefined) {
        alert('not human')
    } else {
        alert(' human');
    }


});

$('#click').click(function(event) {
    $("#try").click();
});

Answer 2

More straight forward than above would be:

$('.checkbox').change(function(e){
  if (e.isTrigger)
  {
    alert ('not a human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert

Answer 3

Currently most of browsers support event.isTrusted:

if (e.isTrusted) {
  /* The event is trusted: event was generated by a user action */
} else {
  /* The event is not trusted */
}

From docs:

The isTrusted read-only property of the Event interface is a Boolean 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().

Answer 4

I think that the only way to do this would be to pass in an additional parameter on the trigger call as per the documentation.

$('.checkbox').change(function(e, isTriggered){
  if (!isTriggered)
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change', [true]); //doesn't alert

Example: http://jsfiddle.net/wG2KY/

Answer 5

Accepted answer didn't work for me. It's been 6 years and jQuery has changed a lot since then.

For example event.originalEvent returns always true with jQuery 1.9.x. I mean object always exists but content is different.

Those who use newer versions of jQuery can try this one. Works on Chrome, Edge, IE, Opera, FF

if ((event.originalEvent.isTrusted === true && event.originalEvent.isPrimary === undefined) || event.originalEvent.isPrimary === true) {
    //Hey hooman it is you
}

Answer 6

Incase you have control of all your code, no alien calls $(input).focus() than setFocus().

Use a global variable is a correct way for me.

var globalIsHuman = true;

$('input').on('focus', function (){
    if(globalIsHuman){
        console.log('hello human, come and give me a hug');
    }else{
        console.log('alien, get away, i hate you..');
    }
    globalIsHuman = true;
});

// alien set focus
function setFocus(){
    globalIsHuman = false;
    $('input').focus();
}
// human use mouse, finger, foot... whatever to touch the input

If some alien still want to call $(input).focus() from another planet. Good luck or check other answers

Answer 7

I needed to know if calls to the oninput handler came from the user or from undo/redo since undo/redo leads to input events when the input's value is restored.

  valueInput.oninput = (e) => {
    const value = +valueInput.value
    update(value)
    if (!e.inputType.startsWith("history")) {
      console.log('came from human')
      save(value)
    }
    else {
      console.log('came from history stacks')
    }
  }

It turns out that e.inputType is "historyUndo" on undo and "historyRedo" on redo (see list of possible inputTypes).

Answer 8

You can use onmousedown to detect mouse click vs trigger() call.

Answer 9

I would think about a possibility where you check the mouse position, like:

• Click
• Get mouse position
• Overlaps the coords of the button
• ...