如何在TypeScript中手动触发TouchEvent

问题描述：

我想手动触发触摸事件，但无法呼叫。这在JavaScript中是可行的，但TypeScript无法实现。如何在TypeScript中手动触发TouchEvent

例子：

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没有正确支持'TouchEvent'的创建，既不是通过'new TouchEvent'也不是通过更老的'做cument.createEvent（）'。我会提交一个bug，但目前我缺乏时间。 –

@MadaraUchiha这是一个错误？ –

是的，它看起来像在TypeScript中的一个真正的错误。 –

答

这是一个真正的Bug打字稿的lib.d.ts定义一切在JavaScript和DOM的类型是如何模样。

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

如果他们得到接受，你可以期望的new TouchEvent(eventType, initArguments);标准的方式在打字稿的未来版本。

JavaScript中做的正确的方式请参见this MDN tutorial。

感谢（y）的精彩评论 –

答

我最近一直在试图触发打字稿触摸事件，并在相同的问题击中。展望一下，我看到了角度材料团队在测试中如何解决这个问题，所以我采取了类似的方法。下面是例子我用嘲笑TouchEvents与touchstart和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警告，并且事件在我的测试中被触发和处理

我只使用事件的changedTouches属性 - 所以我只将该属性添加到事件中。如果你正在使用'touches array'，那就改为添加 – Ryan

如何在TypeScript中手动触发TouchEvent

相关推荐