Summary
Testing iPhone’s touch events (ontouchstart ontouchend ontouchmove and ontouchcancel). You can’t really see it in action unless you have a touch device, like the iPhone.
Date Created
17 June 2009
3 Responses to “Touch Events”
Leave a Reply
Example
1
2
3
4
Go to http://www.ivanwlam.com/experiments/files/programming/2009/090617-iPhoneFunctions/090617-touchEvents.php for original test page.
Internal CSS in <head>
#box1,#box2,#box3{
width:150px;
height:100px;
background-color:white;
margin-right:10px;
margin-bottom:10px;
float:left;
}
#box4{
background-color:green;
width:300px;
height:400px;
margin-right:10px;
margin-bottom:10px;
float:left;
}
HTML in Example
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
Written-out JavaScript at the end of the document
<script type="text/javascript">
<!--
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
var box4=document.getElementById("box4");
box1.ontouchstart=function(){
alert("Touch Start!");
}
box2.ontouchstart=function(e){
e.preventDefault();
box2.ontouchcancel=function(e){
alert("Canceled!");
}
}
box3.ontouchend=function(){
alert("touch ended!");
}
//http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
box4.ontouchstart=function(e){
e.preventDefault();
if(e.touches.length==1){
var touch=e.touches[0];
var boxLeftToTouchLeft=touch.pageX-box4.offsetLeft;
var boxTopToTouchTop=touch.pageY-box4.offsetTop;
box4.ontouchmove=function(e){
e.preventDefault();
if(e.touches.length==1){
var touch=e.touches[0];
var node=touch.target;
node.style.position="absolute";
var touchToLeft=touch.pageX-boxLeftToTouchLeft;
var touchToTop=touch.pageY-boxTopToTouchTop;
node.style.left=touchToLeft+"px";
node.style.top=touchToTop+"px";
node.innerHTML=touch.pageX+" "+touchToLeft+" "+boxLeftToTouchLeft+" "+boxTopToTouchTop;
}
}
}
this.ontouchend=function(){
boxLeftToTouchLeft=boxTopToTouchTop=null;
}
}
//-->
</script>
[...] iPhone TouchEvents – basic iPhone stuff, sort of like mouse events for desktop browsers. [...]
[...] touch events [...]
[...] touch events [...]