Question

我知道使用MouseEvent构造函数可以实现鼠标事件。

例如，使用MouseEvent构造函数，您可以轻松地模拟鼠标点击。通过这种方法，我可以为我的＆＃34;假的＆＃34;添加其他字段。鼠标事件，如

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附加到传递给事件处理程序的对象，以确定是否已调度事件以响应用户操作或应用程序操作。

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript - 您是否可以检测到用户或应用程序触发了某个事件？

1 个答案: