18

アップデート

TypeScript 1.5.3は、HTMLTouchイベントの宣言を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をどのように処理しますか？ありがとう。

4

4 に答える 4

16

TypeScript 3.7.7以降、TouchEventはlib.dom.dでサポートされています。TouchEventを参照してください。TypeScript 宣言をより完全に理解するには、TouchEventsW3C仕様に進む価値があります。

元の回答：アドバイスありがとうございます。私は2011年5月5日のタッチイベント仕様W3Cワーキングドラフトに行き、そこから一連のアンビエント宣言を作成しました。最近の推奨候補がありますが、これは実際にほとんどのブラウザに実装されていると思います。これはうまくいくようです。

PS：下部にあるdeclare var TouchEventは、w3cドラフトの一部ではありません。これは、TypeScriptに付属している標準インターフェースの一部であるUIEventの同じコードを適応させたものです。

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;
}
于 2012-10-13T05:12:28.110 に答える
7

ここにはいくつかのオプションがあります。

最初のオプション：UIEventを拡張して、TouchEventに期待するメンバーを追加します（タッチイベントリスナーでのみ使用します）。

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

2番目のオプション：独自のTouchEventインターフェイスを定義し、イベントをバインドするときにタイプアサーションを追加します

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

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

 theElement.addEventListener("touchstart", <UIEvent>((theTouchEvent:TouchEvent) => alert("touchy")));
于 2012-10-13T03:48:11.847 に答える
6

これが補遺です。このコードは、タイプイベントハンドラーを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;
}
于 2012-10-15T23:29:58.950 に答える
1

アップデート

3.7.7以降、TypescriptはTouchEventインターフェイスを完全にサポートしています。

TouchEventインターフェースを参照してください

于 2021-04-26T16:19:17.540 に答える