Skip to content

Instantly share code, notes, and snippets.

@abarth500

abarth500/gist:4214574

Created December 5, 2012 10:30
Show Gist options
  • Save abarth500/4214574 to your computer and use it in GitHub Desktop.
Save abarth500/4214574 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Example for Handling Multi-touch Event on JavaScript
Raw
gistfile1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var touchInf = {};
Ext.getDom("panel").addEventListener("touchstart",function(e){
for(var c = 0; c < e.changedTouches.length; c++){
touchInf[e.changedTouches[c].identifier] = {"x":e.changedTouches[c].clientX,"y":e.changedTouches[c].clientY};
Ext.getDom("msg").innerHTML = JSON.stringify(touchInf);
}
},false);
Ext.getDom("panel").addEventListener("touchend",function(e){
for(var c = 0; c < e.changedTouches.length; c++){
delete touchInf[e.changedTouches[c].identifier];
Ext.getDom("msg").innerHTML = JSON.stringify(touchInf);
}
},false);
Ext.getDom("panel").addEventListener("touchmove",function(e){
for(var c = 0; c < e.changedTouches.length; c++){
touchInf[e.changedTouches[c].identifier] = {"x":e.changedTouches[c].clientX,"y":e.changedTouches[c].clientY};
Ext.getDom("msg").innerHTML = JSON.stringify(touchInf);
}
},false);
Ext.getDom("panel").addEventListener("touchcancel",function(e){
for(var c = 0; c < e.changedTouches.length; c++){
delete touchInf[e.changedTouches[c].identifier];
Ext.getDom("msg").innerHTML = JSON.stringify(touchInf);
}
},false);
});
</script>
</head>
<body onContextmenu="return false">
<div id="panel" style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
</div>
<div id="msg">&nbsp;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment