Блог

Можно ли определить, произошло ли такое событие input , как blur , change и т.д. был уволен из-за взаимодействия с пользователем или если он был уволен программно с использованием inputElement.dispatchEvent(new Event('change')) etc.?

Проблема, с которой я сталкиваюсь, заключается в том, что сторонняя библиотека пользовательского интерфейса зарегистрировала обработчик событий, который прослушивает 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"> 

Вы можете использовать isTrusted свойство события, чтобы проверить, было ли оно вызвано взаимодействием пользователя или нет:

Свойство isTrusted интерфейса только для чтения- Event это Boolean то true , когда событие было сгенерировано действием пользователя и false когда событие было создано или изменено сценарием или отправлено через EventTarget.dispatchEvent() .

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

Обратите внимание, что пользователь все еще может запускать события из отладчика вручную или программно, и в этом случае вы никогда не узнаете, откуда произошло событие.