检测事件是否由用户触发而不是以编程方式触发答案

【问题标题】：Detect Whether an Event is Triggered by User and not programmatically检测事件是否由用户触发而不是以编程方式触发
【发布时间】：2020-02-03 17:48:56
【问题描述】：

这个问题之前已经被问过，但在 jQuery 的上下文中。在 jQuery 中，我们可以通过事件对象 (link) 的 originalEvent 属性 来判断它是手动事件还是编程事件。 p>

就我而言，我使用 Javascript事件监听器和触发器。在这种情况下，我们能否区分这两种事件 （编程和手动）？

如果没有，那么有什么解决方法吗？

我的听众：

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

触发用例：

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);

还有更多...

【问题讨论】：

jquery 只是 javascript。如果在jquery中你可以做到，你可以在js中做到。
hmmm....知道他们是如何在 jQuery 中做到这一点的吗？
什么代码以编程方式触发事件？
event.isTrusted - 但仅支持部分浏览器
“在 jQuery 中，事件对象具有 originalEvent 属性，通过它我们可以判断它是手动事件还是编程事件”——我对此表示怀疑。文档只说某些事件可能具有比 jQuery Event 对象提供的属性更多的属性，并且 originalPrevent 可用于访问这些属性，因为它指的是本机 JS Event 对象。但我不明白这将如何区分用户触发的事件和脚本触发的事件。

标签： javascript dom-events

【解决方案1】：

在最新的浏览器中，Event.isTrusted 可用于此特定用例。根据其MDN document:

Event 接口的 isTrusted 只读属性是一个布尔值，当事件由用户操作生成时为 true，当事件由脚本创建或修改或通过 dispatchEvent 分派时为 false。

您可以简单地检查任何事件处理程序：

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

浏览器支持：Chrome 46.0、Firefox（最新）、Opera 33、Safari 和 IE（不支持）

【讨论】：

这不正确。即使被代码触发也可以被信任。
至少对于 AmazonKids 浏览器（基于 Chrome 94），有一些事件（例如 touchstart）有 isTrusted === true 但无法启动 audio.play() 因为它们不是由user-gesture。但也许这只是一个错误，或者用户手势比“用户触发”更复杂。

【解决方案2】：

[解决方法] Javascript：检查 event.screenX 和 event.screenY 是否非零。

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

当用户点击按钮时，它会有一些真实的 screenX 和 screenY 基于按钮位置。但是当你从代码中做到这一点时 - 它会是零

【讨论】：

嗯...让我试一试。同时你能解释一下它是如何工作的吗？
当用户点击按钮时，它会根据按钮的位置有一些真实的screenX和screenY。但是，当您从代码中执行此操作时，它将为零。
@Vijay 在我尝试过的所有解决方案中，e.isTrusted 或 e.originalEvent 或 'e.which' 当我们触发像 $("#button")[0].click(); 这样的 DOM 点击时都失败了，你的解决方案是唯一有效的解决方案跨所有场景和点击组合。但不幸的是，它不适用于键盘点击。但无论如何 +1 是一个干净简单的解决方案。

【解决方案3】：

我知道如何在 jQuery 中做到这一点

您可以通过检查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>

【讨论】：

感谢您的回复。就像我在我的问题中所说的那样，我正在使用纯 Js 事件和触发器。如果我一直在使用 jQuery，我就不会发布这个问题了。
@bhavya_w 这个答案可以帮助那些可能和你有同样问题但可以使用 jQuery 的人。

【解决方案4】：

这对我有用

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

【讨论】：