描述
我有一个特定的函数(为了清楚起见,我们称之为foo),如果用户将光标移动到某个元素上,应该执行该函数。由于我不知道用户拥有什么设备,因此我附加了所有可能的处理程序:
element.addEventListener(`mousedown`, (event) => {
foo();
});
element.addEventListener(`pointerdown`, (event) => {
foo();
});
element.addEventListener(`touchstart`, (event) => {
foo();
});
现在我需要确保当其中一个处理程序同时开始工作时,其余处理程序保持沉默,以便该函数执行 1 次,而不是 3 次。我这样做:
const controller = new AbortController();
await new Promise((resolve) => {
element.addEventListener(`mousedown`, (event) => {
resolve();
}, { signal: controller.signal });
element.addEventListener(`pointerdown`, (event) => {
resolve();
}, { signal: controller.signal });
element.addEventListener(`touchstart`, (event) => {
resolve();
}, { signal: controller.signal });
});
foo();
controller.abort();
它运作良好,但只能运作一次。为了让它再次工作,我需要创建一个函数,每次完成后都会生成相同的结构。
问题
好吧,解决方案就是解决方案的工作原理。但如果我们考虑到除了mousedown、之外pointerdown,touchstart我们还添加mousemove、pointermove和touchmove一堆其他类似的处理程序,那么在我看来,它看起来很乏味。
问题
有替代的、更好的解决方案吗?
或者这个设计可以简化吗?
常问问题
— 为什么不只使用
pointer...监听器?它们也是通用的。- 它们有时无法正常工作。例如,pointermove在移动设备上使用时,放下鼠标后会冻结 24-30 帧。
— 为什么不为每个设备使用正确的处理程序?- 我很乐意。但如何才能 100% 知道处理程序是否“正确”呢?处理程序无处不在,但不做出反应。
navigator.userAgent提供不正确的信息。我还应该尝试哪些其他方法?