Detect Whether an Event is Triggered by User and not programmatically

问题

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

回答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)

回答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");
       }   
}

回答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>

回答4:

This working for me

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

来源：https://stackoverflow.com/questions/29798010/detect-whether-an-event-is-triggered-by-user-and-not-programmatically

标签

javascript

dom-events