Поддерживает ли TypeScript TouchEvent?
UPDATE
TypeScript 1.5.3 добавлены объявления для событий HTML Touch в 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. Как обращаться с TouchEvent с помощью TypeScript? Спасибо.
Ответы
Ответ 1
У вас есть несколько вариантов:
Первая опция: Расширьте 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
Благодарю вас за совет. Я отправился на рабочий проект W3C для работы с сенсорными событиями 05 мая 2011 года и создал из него набор эмбиентных объявлений. Существует более новая рекомендация кандидата, но это то, что, на мой взгляд, фактически реализовано в большинстве браузеров. Кажется, что это хорошо работает.
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;
}
Ответ 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;
}