JavaScript. Можете ли вы обнаружить, что событие было вызвано пользователем или приложением?

Question

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

Например, с помощью конструктора MouseEvent вы можете легко имитировать щелчки мыши. При таком подходе, я могу добавить дополнительные поля в моем случае «поддельные» мыши, такие как

var event = new MouseEvent(type, mouseEventInit)' 
event.fake = true 

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

Я хотел бы сделать что-то подобное с html-видео, когда оно будет воспроизведено/приостановлено/искажено. Видео может управляться моим приложением (вызов video.play(), video.pause() или установка video.currentTime = x) или пользователь (обычно используя видеоконтроль) в любой момент времени. Когда слушатели событий, которые я добавил, увольняются, у меня нет способа узнать, кто или что является источником (пользователем или моим приложением).

Так в основном, я не хотите слушать события, вызванные моим приложением, но я хочу слушать действия пользователя (пользователь нажал на кнопку воспроизведения или добившиеся в видео, то нажав на индикатор выполнения).

Мой текущий подход заключается в удалении слушателей и добавлять их потом так:

video.removeEventListener('play', playListener) 
video.play() 
// I have to wait until the video actually plays 
setTimeout(function() { 
    video.addEventListener('play', playListener) 
}, 100) 

Он отлично работает, но когда я делаю это для поиска, это труднее, чтобы выбрать хорошее время для settimeout из-за буферизация видео (кажется, что событие seeked запускается после завершения буферизации видео). Поэтому я изучаю разные методы.

Я знаю о конструкторе CustomEvent(), но я сомневаюсь, что смогу использовать это, чтобы на самом деле играть или искать. Мне нужно создать событие, которое вызовет соответствующие действия (воспроизведение, пауза или поиск). Не стесняйтесь исправить меня, если я ошибаюсь.

Какие-либо другие идеи я мог обнаружить события, вызванные моим приложением и/или пользователем?

Answer 1

Вы можете прикрепить Boolean к объекту, переданному обработчику событий, чтобы определить, было ли отправлено событие в ответ на действие пользователя или действие приложения.

var button = document.querySelector("button"); 
 
var div = button.nextElementSibling; 
 

 
var app = { 
 
    config: "def", 
 
    userAction: "abc", 
 
    setApp: function setApp(duration) { 
 
    this.timeout = setTimeout(function() { 
 
     button.dispatchEvent(appEvent) 
 
    }, duration || 3500); 
 
    }, 
 
    timeout: null 
 
} 
 

 
// dispatch `app` event 
 
app.setApp(0); 
 

 
function handleEvent(event) { 
 
    // check `event.detail.app` object `Boolean` value 
 
    if (event.detail.app) { 
 
    div.textContent = app.config; 
 
    } else { 
 
    div.textContent = app.userAction; 
 
    // dispatch `app` event in 3500ms 
 
    app.setApp(); 
 
    } 
 
} 
 

 
button.onclick = handleEvent; 
 

 
// set plain object having `Boolean` value at `event.detail` `{app:true}` 
 
var appEvent = new CustomEvent("click", { 
 
    detail: { 
 
    app: true 
 
    } 
 
});

<button>click</button> 
 
<div></div>