如何在TypeScript中手动触发Touch事件

Posted 2021-04-19

我想手动触发触摸事件，但我无法调用。这在javascript中是可能的，但TypeScript无法实现。

例：

 let touchStart: TouchEvent = document.createEvent('TouchEvent');
 touchStart.initEvent('touchstart', true, true);
 element.dispatchEvent(touchStart);

如果我试过这个我能够触发touchStart事件，但我无法得到changedTouches[0].pageX和changedTouches[0].pageY

基于this link我试过如下，

 touchStart.changedTouches = [
    pageX: x
    pageY: y
  ]

但我无法在changedTouches中分配值，因为该属性是只读的。

怎么做到这一点？在TypeScript中使用changedTouches？

答案

这是TypeScript的lib.d.ts的一个实际错误，它定义了JavaScript和DOM中所有类型的外观。

我打开了一个ticket和一个pull request来解决这个问题。

如果它们被接受，您可以期望new TouchEvent(eventType, initArguments);的标准方式在未来版本的TypeScript中工作。

有关在JavaScript中执行此操作的正确方法，请参阅this MDN tutorial。

另一答案

我最近一直试图在TypeScript中触发触摸事件，并遇到了同样的问题。调查一下，我看到了Angular Material团队在他们的测试中如何解决这个问题，所以我采取了类似的方法。下面是我使用touchstart和设置的changedTouches模拟数组来模拟TouchEvents的代码示例：

let te = createTouchEvent(parenthtmlElement, 'touchstart');
parentHtmlElement.dispatchEvent(te);

function createTouchEvent(touchTarget: HTMLElement, type: string) {        
    const event = document.createEvent('UIEvent');    
    event.initUIEvent(type, true, true, window, 0);

    let touches = [{target: touchTarget}];

    Object.defineProperties(event, {
      changedTouches: {value: touches}
    });    
    return event;
}

在我的组件中，我正在监听以下事件：

 this.touchStartListener = this.renderer.listen('document', 'touchstart', (event: TouchEvent) => {
                    this.handleTouchStart(event);
                });

这非常有效，没有TypeScript警告，并且在我的测试中触发和处理事件