[javascript]iPhoneタッチイベント
iPhone,iPodTouch,iPadのSafariでは、javascriptでタッチしたかどうか取得することが出来ます。
ここにそのサンプルを記します。
iPhone,iPodTouch,iPadで下記アクセス。
/js/07/
html
<div id="field" onSelectStart="return false;" onMouseDown="return false;"> <div id="output">touch me !</div> <div id="cross"></div> </div>
CSS
body{
padding:0;
margin:0;
}
div#field{
padding:0;
margin:0;
width:320px;
height:416px;
border-bottom:1px solid;
position:absolute;
}
div#output{
padding:0;
padding-top:20px;
margin:0;
width:320px;
font-size:12px;
text-align:center;
text-weight:bold;
border:none;
position:absolute;
z-index:80;
}
div#cross{
background-image:url(../image/cross.gif);
width:21px;
height:21px;
position:absolute;
z-index:30;
display:none;
}
javascript
setInterval(oef_check, 1000/30);
var mc;
mc=document.getElementById("field");
//タッチした時
mc.addEventListener("touchstart", onTouchStart, false);
//指が動いた時
mc.addEventListener("touchmove", onTouchMove, false);
//指が離れた時
mc.addEventListener("touchend", onTouchEnd, false);
//イベントがシステムによってキャンセルされた時
mc.addEventListener("touchcancel", onTouchCancel, false);
//２本の指がタッチした時
mc.addEventListener("gesturestart", onGestureStart, false);
//２本の指が動いた時
mc.addEventListener("gesturechange", onGestureChange, false);
//指が０～１本になった時
mc.addEventListener("gestureend", onGestureEnd, false);
function onTouchStart(e){
e.preventDefault();
st1="onTouchStart";
tlist=e.touches;
set_touch_center();
}
function onTouchMove(e){
e.preventDefault();
st1="onTouchMove";
tlist=e.touches;
set_touch_center();
}
function onTouchEnd(e){
e.preventDefault();
st1="onTouchEnd";
tlist=e.touches;
set_touch_center();
}
function onTouchCancel(e){
e.preventDefault();
st2="onTouchCancel";
tlist=e.touches;
set_touch_center();
}
function onGestureStart(e){
e.preventDefault();
st2="onGestureStart";
tlist=e.touches;
set_touch_center();
}
function onGestureChange(e){
e.preventDefault();
st3="onGestureChange";
tlist=e.touches;
set_touch_center();
}
function onGestureEnd(e){
e.preventDefault();
st2="onGestureEnd";
st3="";
tlist=e.touches;
set_touch_center();
}
function set_touch_center(){
var a;
var m;
var bx=0;
var by=0;
for(a=0;a<tlist.length;a++){
m=tlist[a];
bx+=m.pageX;
by+=m.pageY;
}
bx/=tlist.length;
by/=tlist.length;
tc.x=bx;
tc.y=by;
}
function oef_check(){
var s="";
s+=st1;
s+="<br>";
s+=st2;
s+="<br>";
s+=st3;
s+="<br>";
if(tlist.length>0)s+="タッチの中心座標 x："+tc.x+"y："+tc.y+"";
var mc=document.getElementById("output");
mc.innerHTML=s;
mc=document.getElementById("cross");
mc.style.left=(tc.x-10)+"px";
mc.style.top=(tc.y-10)+"px";
mc.style.display="block";
}
