Question

更新

TypeScript 1.5.3 added declarations for HTML Touch events to lib.d.ts

我可以看到它支持UIEvent，但它似乎没有触摸事件的接口。

此代码表示“TouchEvent在当前范围内不存在。”

class Touchy {
    private _element:Element;

    constructor(theElement:Element) {
        this._element = theElement;

        theElement.addEventListener("touchstart", (theTouchEvent:TouchEvent) => alert("touchy"));
    }
}

我可以使用UIEvent，但不能使用TouchEvent。我如何使用TypeScript处理TouchEvent？感谢。

Answer 1

谢谢你的建议。我参加了2011年5月5日的触摸事件规范W3C工作草案，并从中创建了一组环境声明。有一个更近期的候选推荐，但我认为这是在大多数浏览器中实际实现的。这似乎运作良好。

PS：底部的声明var TouchEvent不是w3c草案的一部分。它是UIEvent的相同代码的改编版，它是TypeScript随附的标准接口的一部分。

interface Touch {
    identifier:number;
    target:EventTarget;
    screenX:number;
    screenY:number;
    clientX:number;
    clientY:number;
    pageX:number;
    pageY:number;
};

interface TouchList {
    length:number;
    item (index:number):Touch;
    identifiedTouch(identifier:number):Touch;
};

interface TouchEvent extends UIEvent {
    touches:TouchList;
    targetTouches:TouchList;
    changedTouches:TouchList;
    altKey:bool;
    metaKey:bool;
    ctrlKey:bool;
    shiftKey:bool;
    initTouchEvent (type:string, canBubble:bool, cancelable:bool, view:AbstractView, detail:number, ctrlKey:bool, altKey:bool, shiftKey:bool, metaKey:bool, touches:TouchList, targetTouches:TouchList, changedTouches:TouchList);
};

declare var TouchEvent: {
    prototype: TouchEvent;
    new(): TouchEvent;
}

Answer 2

这里有几个选项：

第一个选项：扩展UIEvent以在TouchEvent上拥有您期望的成员（并且仅在触摸事件侦听器中使用它们）：

interface UIEvent {
    targetTouches: { pageX: number; pageY: number; }[];
    // etc...
}

第二个选项：定义自己的TouchEvent接口，并在绑定事件时添加类型断言

interface TouchEvent {
    (event: TouchEventArgs): void;
}

interface TouchEventArgs {
    targetTouches: { pageX: number; pageY: number; }[];
    // etc
}

 theElement.addEventListener("touchstart", <UIEvent>((theTouchEvent:TouchEvent) => alert("touchy")));

Answer 3

这是一个附录。此代码将类型事件处理程序添加到HTMLElement。您可以在定义TouchEvent接口的代码之后添加它;

//
// add touch events to HTMLElement
//
interface HTMLElement extends Element, MSHTMLElementRangeExtensions, ElementCSSInlineStyle, MSEventAttachmentTarget, MSHTMLElementExtensions, MSNodeExtensions {
    ontouchstart: (ev: TouchEvent) => any;
    ontouchmove: (ev: TouchEvent) => any;
    ontouchend: (ev: TouchEvent) => any;
    ontouchcancel: (ev: TouchEvent) => any;
}

Answer 4

更新

从 3.7.7 开始，Typescript 全面支持 TouchEvent 接口。

见TouchEvent interface

TypeScript是否支持TouchEvent？

4 个答案: