Question

我想手动触发触摸事件，但我无法拨打电话。这在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

Answer 1

这是TypeScript＆＃39; s lib.d.ts的实际错误，它定义了JavaScript和DOM中所有内容的类型。

我已经开通了ticket和pull request来解决此问题。

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

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

Answer 2

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

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警告，并且在我的测试中触发和处理事件

如何在TypeScript

2 个答案: