Is there a way to determine if a select element's change
event was performed by user versus via code (dom manipulation)?
I have a timer that auto sets some select values based on some condition and then formats the select color to signify "success" (green select box).
Because I have the form set to fire off an ajax request when the select change event is fired, it does this for both the timer-based changes to the selects, as well as user-based select changes.
I'd like to only fire that ajax event when it's a user-based select change.
Is this possible?
EDIT:
When I output the value of e.isTrusted
, it says Undefined in the log.
Here is my code:
$(document).on('change', 'select', function (e) {
e.preventDefault();
console.log(e.isTrusted); // This outputs "Undefined"
if (e.isTrusted) {
save_review();
console.log("Point status changed by user - Saved");
} else {
console.log("Point status changed programmatically - Not Saved");
}
});
Managed to solve this based on a solution I found googling and with the help of the community-provided answers above.
When the timer-based event triggers, I now pass it a boolean value (auto_selected):
$("#pt" + value + " option:nth-child(2)").attr('selected', true).trigger('change', [true]);
In my event listener, I am then able to check against the value of that parameter:
$(document).on('change', 'select', function (e, auto_selected) {
e.preventDefault();
console.log("Auto-selected: " + auto_selected);
if (typeof auto_selected == 'undefined' || !auto_selected) {
save_review();
console.log("Point status changed by user - Saved");
} else {
console.log("Point status changed programmatically - Not Saved");
}
});
There is a property called isTrusted on the event object that you can use to check whether the event is triggered by user action or by script.
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()
if (e.isTrusted) {
/* The event is trusted */
} else {
/* The event is not trusted */
}
if you use jQuery, it's inside event.originalEvent
if (e.originalEvent && e.originalEvent.isTrusted) {
/* The event is trusted */
} else {
/* The event is not trusted */
}
If you use select2
, listen to the event select2:select
, and check for event.params.originalEvent.originalEvent
(two originalEvent
here, seems like a bad implementation inside the library itself)
$('#your-selector').on('select2:select', function(e) {
if(e?.params?.originalEvent?.originalEvent) {
// user action
} else {
// programatically trigger
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With