有什么方法可以创建 TouchEvents 或在 Firefox 中作为一个工作的东西吗？

Question

我正在尝试编写一个可以创建人工 TouchEvents 的浏览器插件。到目前为止，我已经在 Chrome 中工作，但 Firefox 似乎不支持 TouchEvents，因为尝试使用 new TouchEvent(...) 创建一个会产生：

ReferenceError: TouchEvent is not defined

我想知道是否有某种方法可以让我自己在附加组件中实现 TouchEvent，或者分派一个事件，该事件具有所有必要的属性，可以像 TouchEvent 一样使用。

但是，如果我创建一个 CustomEvent 并为其分配有效成为 TouchEvent 所需的额外属性（即 touches、targetTouches 和 changedTouches) 这些属性在网页收到事件时不会持续存在。

有什么方法可以完成我所追求的，还是我运气不好，无法在 Firefox 中使用它？

Answer 1

万一其他人有这个问题，这里是我找到的解决方案。您可以创建自己的 class 来扩展 UIEvent，如下所示：

class TouchEvent extends UIEvent {
    constructor(name, initDict) {
        super(name, initDict);
        this.touches = initDict.touches;
        this.targetTouches = initDict.targetTouches;
        this.changedTouches = initDict.changedTouches;
    }
}

需要注意的是，这些事件必须由脚本运行在与接收它们的处理程序相同的域中构建，否则您将收到 Permission denied to access property 错误。我的解决方案是使用我的扩展程序的内容脚本在当前文档的正文中添加一个脚本元素，并将其 textContent 属性设置为我的 javascript 创建和调度触摸事件的代码。

Answer 2

我无法得到可接受的答案，因为我不知道如何构建需要放在 initDict 中的 touches。这是对我有用的：

function dispatchTouchEvent(eventName, details) {
    const uiEvent = document.createEvent('UIEvent');
    uiEvent.initUIEvent(eventName, true, true, window, 1);
    const event = Object.assign(uiEvent, {touches: [details]});
    details.target.dispatchEvent(event);
}

下面是如何在坐标 (50, 100) 的 body 元素上使用 touchstart 事件调用它：

dispatchTouchEvent('touchstart', {identifier: 0, target: document.body, pageX: 50, pageY: 100});

出于我的目的，我只需要设置 pageX 和 pageY 属性，但根据您的操作，可能需要设置 clientX、clientY、screenX 或 screenY.

有什么方法可以创建 TouchEvents 或在 Firefox 中作为一个工作的东西吗？

Is there any way to create TouchEvents or something that works as one in Firefox?

javascript

firefox

firefox-addon

touch-event