[英]JavaScript - Can you detect wether an event was triggered by the user or the app?
I know that this is possible with for mouse events using the MouseEvent constructor. 我知道使用MouseEvent构造函数进行鼠标事件是可能的。
For example, with the MouseEvent constructor, you can simulate mouse clicks easily. 例如,使用MouseEvent构造函数,您可以轻松模拟鼠标单击。 With this approach, I can add additional fields to my "fake" mouse event such as
通过这种方法,我可以向“假”鼠标事件中添加其他字段,例如
var event = new MouseEvent(type, mouseEventInit)'
event.fake = true
that allows me to detect in the listener wether this event was triggered by the user or the app. 这使我能够在侦听器中检测此事件是否由用户或应用触发。
I would like to do something similar with a html video when it is played/paused/seeked. 当播放/暂停/搜索html视频时,我想对它做类似的事情。 The video can either be controlled by my app (calling
video.play()
, video.pause()
or setting video.currentTime = x
) or the user (using the video controls normally) at any given time. 可以在任何给定时间通过我的应用(调用
video.play()
, video.pause()
或设置video.currentTime = x
)或用户(正常使用视频控件)控制视频。 When the event listeners I added are fired I do not have a way to know who or what was the source (the user or my app). 当我添加的事件侦听器被解雇时,我无法知道源(用户或我的应用程序)的来源或来源。
So basically, I don't want to listen to events triggered by my app but I do want to listen to user actions (the user clicked on the play button or seeked in the video by clicking somewhere on the progress bar). 因此,基本上, 我不想听我的应用程序触发的事件,但是我想听用户的操作(用户单击播放按钮或通过单击进度栏上的某个位置在视频中进行搜索)。
My current approach is to remove the listeners and add them back afterwards like so: 我当前的方法是删除侦听器,然后将其添加回去,如下所示:
video.removeEventListener('play', playListener)
video.play()
// I have to wait until the video actually plays
setTimeout(function() {
video.addEventListener('play', playListener)
}, 100)
It works fine, but when I do this for seeking, it's harder to select a good time for settimeout
because of video buffering (it seems like the seeked
event is triggered after the video finished buffering). 它工作正常,但是我这样做的途径,以求时,是很难选择一个好时机
settimeout
因为视频缓冲(这似乎是seeked
后视频缓冲完毕触发事件)。 So I'm exploring different methods. 因此,我正在探索不同的方法。
I know about the CustomEvent() constructor, but I doubt I could use this to actually play or seek. 我知道CustomEvent()构造函数,但是我怀疑我可以用它实际播放或搜索。 I need to create an event that will trigger the appropriate actions (play, pause or seek).
我需要创建一个事件,该事件将触发相应的操作(播放,暂停或搜索)。 Feel free to correct me if I'm wrong.
如果我错了,请随时纠正我。
Any other ideas I could detect events triggered by my app and/or the user? 我还有其他可以检测到由我的应用程序和/或用户触发的事件的想法吗?
You can attach a Boolean
to object passed to event handler to determine if event was dispatched in response to user action or application action. 您可以将
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.