Javascript : Detect Whether an Event is Triggered by User and not programmatically

27
May 18, 2019, at 6:20 PM

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: 1.)

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

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

and many more...

Answer 1

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)

Answer 2

[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");
       }   
}
Answer 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>

READ ALSO
Get date value from spreadsheet using Google apps script

Get date value from spreadsheet using Google apps script

I have been struggling to get proper "date" from spreadsheet using google apps scriptSo below is scenario: 1

43
How does data conversion work between HTML and JavaScript?

How does data conversion work between HTML and JavaScript?

HTML5 documents are encoded in UTF-8, this means 1byte (8bits) per character

18
How to show all divs again when no filter-checkboxes are checked anymore?

How to show all divs again when no filter-checkboxes are checked anymore?

I've built a little filterDepending on the checkboxes you check, it will show boardgames for a certain amount of players and a certain amount of playing time

11