jQuery - detect change event triggered programmatically

Question

I have a jQuery change event for when a user changes a given SELECT element. However the event may also be triggered by a third party script. What I want to do is detect whether the event was triggered programmatically or by the user.

I have tried the accepted solution in this question Check if event is triggered by a human But note the JSFiddle in this answer is for a click event rather than a change event.

To demonstrate I amended the fiddle and created this one: http://jsfiddle.net/Uf8Wv/231/

If you try this in latest Firefox or Chrome, you will see that the alert human is being shown even when the event was triggered programmatically.

I have tried event.originalEvent.isTrusted but that doesn't work in all browsers. Can anyone help?

brandon · Accepted Answer · 2016-06-20 01:20:59Z

1

I have added mouseenter and mouseleave events. The idea is that it's a human if the click coincided with a mousepointer being over the element. See: http://jsfiddle.net/Uf8Wv/232/

$("#try").mouseenter(function(event) {
    mouseover = true;
});
// ... etc.

I can't think of any other way.

answered Jun 20, 2016 at 1:20

brandon

5951 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Kudryashev · Accepted Answer · 2016-06-20 02:03:50Z

1

You can find some vague difference between click and emulated click using this code:

$(document).on('change', "#try", function (event) {
    //some difference appear in the next line
    console.log(event.delegateTarget.activeElement);
    //no difference
    if (event.originalEvent === undefined) {
        alert('not human')
    } else {
        alert(' human');
    }
    event.delegateTarget = null;//doesn't help

});

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

Click on the checkbox logs <input id="try" type="checkbox">.
Click on the button logs <button id="click">.
But...
Run $("#try").click(); from console before any clicks logs <body> and after the click result of the last click.
Generally JS can always fake any client event. So isTrusted is never trusted.

edited Jun 20, 2016 at 2:03

answered Jun 20, 2016 at 1:56

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Comments

Julien Grégoire · Accepted Answer · 2016-06-20 02:34:16Z

You can listen to the click event as well, and modify a variable. The change event seems indeed to be quite similar wheter it's a real click or a script triggered click, but the click on #try event won't be the same. And since click is triggered before change, you have time to set a switch. Like this for example:

var realClick;
$("#try").change(function(event) {
  console.log('change')
  if (!realClick) {
    alert('not human')
  } else {
    alert(' human');
  }

});

$("#try").click(function(event) {
  console.log('click')
  // originalEvent is one way, but there will be many differences
  if (event.originalEvent) {
    realClick = true;
  } else {
    realClick = false;
  }
});

// Since this is called from outside, better not put 
// any controls here.
$('#click').click(function(event) {
  $("#try").click();
});

http://jsfiddle.net/2xjjmo09/3/

Jaber Al Nahian · Accepted Answer · 2021-05-04 18:33:07Z

1

What really worked for me is:

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

Tested with jQuery version 3.5

edited May 4, 2021 at 18:33

answered Aug 22, 2019 at 7:29

Jaber Al Nahian

1,07114 silver badges17 bronze badges

Comments

choz · Accepted Answer · 2016-06-20 01:29:27Z

0

You can easily detect whether the click event on the button is actually triggered by mouse click or not. By doing,

$('#click').click(function(ev) {
    if (ev.which !== undefined && ev.button !== undefined) {
        $("#try").click();
    }
});

Here's the Fiddle

Note: Beware of either ev.which or ev.button could result in 0 on some browser for left-click.

answered Jun 20, 2016 at 1:29

choz

18k5 gold badges58 silver badges76 bronze badges

Comments

Nishanth Matha · Accepted Answer · 2016-06-20 01:56:01Z

0

You can check for if event.srcElement (which is source element on which event is triggered) is equal to event.currentTarget something like:

$("#try").change(function(event) {console.log(event,event.target,event.currentTarget,event.srcElement)
    if (event.currentTarget=== event.srcElement) {
        alert(' human')
    } else {
        alert(' not human');
    }
});

Fiddle: http://jsfiddle.net/Uf8Wv/234/

answered Jun 20, 2016 at 1:56

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery - detect change event triggered programmatically

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related