更新
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?感谢。
答案 0 :(得分:14)
谢谢你的建议。我参加了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;
}
答案 1 :(得分:6)
这里有几个选项:
第一个选项:扩展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")));
答案 2 :(得分:5)
这是一个附录。此代码将类型事件处理程序添加到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;
}
答案 3 :(得分:1)