时间戳

首页 > 解决方案 > 是否可以确定事件是否以编程方式触发？

javascript - 是否可以确定事件是否以编程方式触发？

问题描述

是否可以确定是否由于用户交互而触发了诸如 , 等事件input，blur或者change是否使用inputElement.dispatchEvent(new Event('change'))等以编程方式触发了事件？

我面临的问题是第三方 UI 库注册了一个事件处理程序，该处理程序侦听blur并更改输入元素的外观，如果它是空的。blur如果满足某些条件，我有一个自己的处理程序可以将输入清空。由于我的事件处理程序是在库之后执行的，因此库不会注意到输入现在为空，并且重新抛出模糊事件会导致无限循环。

或者向事件添加自定义属性是否安全，例如......

document.getElementById('input').addEventListener('blur', event => {
  if (event.myOwnCustomProperty !== true) {
    event.target.value = ''
    const customEvent = new Event('blur')
    customEvent.myOwnCustomProperty = true
    event.target.dispatchEvent(customEvent)
  }
})
<input id="input">

标签： javascriptdom-events

解决方案

您可以使用isTrusted事件的属性来检查它是否是由用户交互触发的：

接口的isTrusted只读属性是当事件由用户操作生成时，以及当事件由脚本创建或修改或通过 调度时。EventBooleantruefalseEventTarget.dispatchEvent()

document.getElementById('input').addEventListener('blur', event => {
  if (event.isTrusted) {
    ...
  }
})

请注意，用户仍然可以手动或以编程方式从调试器触发事件​​，在这种情况下，您永远不会知道事件的来源。

推荐阅读