2010/05/24
HTML5 : TouchController
mouse 系のイベントを touch にバイパスさせれば、スマートフォン用コンテンツもPCブラウザでプレビューできます。
以下の TouchController クラス(書いている内容は mouse のドラッグ&ドロップ操作)を継承させて ViewController を作れば簡単なものはすぐ作れます。
しっかり書けば iPhone, Android から PC ともに互換するコンテンツなんかも作れそうな気がします。
// IE 使わないならこの分岐いらない
if (true && document.all && document.attachEvent) {
function eventPreventDefault(){
event.returnValue = false;
}
//http://yupotan.sppd.ne.jp/web/dom2-msie.html
document.addEventListener=function(key,func,b) {
this.attachEvent("on"+key, function(){
return func({
target :event.srcElement,
cancelBubble :event.cancelBubble,
pageX :event.clientX,
pageY :event.clientY,
preventDefault :eventPreventDefault
});
});
}
document.removeEventListener=function(key,func,b) {
this.detachEvent("on"+key, func);
}
}
$class('TouchController',{
initTouch:function(){
if( navigator.userAgent.search(/(iPhone|Android)/) != -1 ){
document.addEventListener("touchstart", this.touchesBegan.bind(this), false);
document.addEventListener("touchmove", this.touchesMoved.bind(this), false);
document.addEventListener("touchend", this.touchesEnded.bind(this), false);
}else{
$('body').style.cursor = "pointer";
this.initMouse();
}
},
initMouse:function(){
document.addEventListener('mousedown', function(e){
this.isDragging = true;
e.touches = [e];
this.touchesBegan(e);
}.bind(this), false);
document.addEventListener('mousemove', function(e){
if (this.isDragging) {
e.touches = [e];
this.touchesMoved(e);
}
}.bind(this), false);
document.addEventListener('mouseup', function(e){
if (this.isDragging) {
this.isDragging = false;
e.touches = [e];
this.touchesEnded(e)
}
}.bind(this), false);
},
touchesBegan:function(){},
touchesMoved:function(){},
touchesEnded:function(){}
});
