Detect Whether an Event is Triggered by User and not programmatically

Question

Well this question has been asked before but in context of jQuery. In jQuery we can check it by originalEvent property of event Object (link) which tells whether its a manual or programmed event.

In my case I am using Javascript Event listeners and triggers. Can we differentiate between the two kind of events (programmed and manual) in this case?

If not then any workarounds?

My Listeners:

   function setUpListeners(){
       _cellViewWrapper.addEventListener('mousedown',mouseDownHandler,false);
       _cellViewWrapper.addEventListener('mouseover',mouseEnter,false);
       _cellViewWrapper.addEventListener('blur',blurHandler,true);
       _cellViewWrapper.addEventListener('focus',focusEventHandler,true);
   }`

Trigger use Cases:

if(!IE_FLAG) hidePicker();
           //if browser is internet explorer
           else{
               //if blur is allowed then hide Picker
               if(_ieBlurAllowed) hidePicker();
               //if blur is not allowed -- keep focus on picker input
              //triggering the focus event here
               else blurredElement.focus(); /
         }

if((inputElem !== _focussedInput)) setTimeout(function(){ inputElem.focus(); },10);

and many more...

jquery is just javascript. If in jquery you can do it, you can do it in js. — kemicofa ghost, Apr 22 '15 at 12:50
[`event.isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted) - but only partial browser support — James Thorpe, Apr 22 '15 at 12:58
_“In jQuery event object has originalEvent property via which we can tell whether its a manual or programmed event”_ – I doubt that. Documentation only says that certain events may have additional properties than the one the jQuery `Event` object provides, and that `originalPrevent` can be used to access those, as it refers to the native JS Event object. But I don’t see how that would allow to differentiate between an event triggered by the user and one triggered via script. — CBroe, Apr 22 '15 at 12:58

score 20 · Answer 1 · answered Mar 25 '16 at 16:17

20

In latest browsers, Event.isTrusted is available for this particular use-case. As per its MDN document:

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 dispatchEvent.

You can simply check inside any event handler:

if (e.isTrusted) {
 /* The event is trusted. */
} else {
 /* The event is not trusted. */
}

Browser Support: Chrome 46.0, Firefox (latest), Opera 33, Safari & IE (no support)

answered Mar 25 '16 at 16:17

Zahin Alwa

338
2
10

5

This is not currect. Can be trusted even if triggered by code. – Nadav Oct 09 '21 at 11:07
At least with the AmazonKids browser (based on Chrome 94), there are events (e.g. touchstart) that have `isTrusted === true` but are unable to start audio.play() because they are not initiated by a `user-gesture`. But maybe that's just a bug or a user-gesture is something more complex than just 'triggered-by-user'. – JepZ Jan 08 '22 at 12:27

score 14 · Answer 2 · edited Feb 03 '20 at 09:48

14

[Workaround] Javascript: Check if event.screenX & event.screenY are non-zero.

var button = document.getElementsByTagName('button')[0];

button.onclick = function(e) {
  if(e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0){
         alert("real button click");
       }   
}

When the user clicks on button, it would have some real screenX and screenY based on the button position. But when you do it from code - it would be zero

edited Feb 03 '20 at 09:48

Sameer

3,505
3
13
33

answered Apr 22 '15 at 13:06

Vijay

2,945
1
13
23

hmm...let me give it a shot. Meanwhile can you please explain me how does it work? – bhavya_w Apr 22 '15 at 13:07
When the user clicks on button, it would have some real screenX and screenY based on the button position. But when you do it from code - it would be zero. – Vijay Apr 22 '15 at 13:08
1

@Vijay Of all the solutions I tried, `e.isTrusted` or `e.originalEvent` or 'e.which' which all fail when we fire a DOM click like `$("#button")[0].click();` Your's is the only solution which works across all scenarios and combination of clicks. But unfortunately it doesn't work for keyboard clicks. But anyways +1 for a clean and simple solution. – Anurag Aug 10 '16 at 22:44

score 3 · Answer 3 · answered Apr 22 '15 at 13:03

3

I know how to do it in jQuery

you can use the event object by checking e.isTrigger

Fiddle

$(".lol").click(function(e){
    console.log(e)
    alert("Is triggered: " + (e.isTrigger ? true:  false))
})

$(".trigger-lol").click(function(e){
    $(".lol").trigger("click")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lol">lol</div>
<div class="trigger-lol">Trigger lol</div>

answered Apr 22 '15 at 13:03

Kushal

1,312
6
15

Thanks for the reply.Like i told in my Question I am using pure Js event and triggers. Had i been using jQuery I would'nt have posted this question. – bhavya_w Apr 22 '15 at 13:05
@bhavya_w This answer helps those who may have the same question as you but can use jQuery. – reformed Feb 07 '18 at 17:14

score 0 · Answer 4 · answered Aug 22 '19 at 07:31

0

This working for me

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

answered Aug 22 '19 at 07:31

Jaber Al Nahian

813
10
14

Detect Whether an Event is Triggered by User and not programmatically

4 Answers4

Linked