Check if event is triggered by a human

JavascriptJquery

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

More straight forward than above would be:

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

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

Solution 3 - Javascript

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().

Solution 4 - Javascript

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/

Solution 5 - Javascript

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
}

Solution 6 - Javascript

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

Solution 7 - Javascript

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

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

Solution 8 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDziamidView Question on Stackoverflow
Solution 1 - JavascriptNicola PeluchettiView Answer on Stackoverflow
Solution 2 - JavascriptKenneth SpencerView Answer on Stackoverflow
Solution 3 - JavascriptfelipsmartinsView Answer on Stackoverflow
Solution 4 - JavascriptdetaylorView Answer on Stackoverflow
Solution 5 - JavascriptErgecView Answer on Stackoverflow
Solution 6 - Javascriptvanduc1102View Answer on Stackoverflow
Solution 7 - JavascriptLukeView Answer on Stackoverflow
Solution 8 - JavascriptboatengView Answer on Stackoverflow