iphone safari getelementbyid touchStart -webkit-user-select マルチタッチ ジェスチャ HTML JavaScript

f:id:peroon:20101018235651j:image

<html>
<head>
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
<script type="text/javascript" language="javascript">
<!--
function init(){
	document.bgColor="#00ff00";

var touchStart = function(e){
	document.getElementById("ID").innerHTML = "指:"+e.touches.length;
	document.getElementById("ID").style.fontSize="120px"
	document.getElementById("ID").style.textAlign="center"
	switch(e.touches.length){
		case 1:
			document.getElementById("ID").style.backgroundColor="ff0000";
			break;
		case 2:
			document.getElementById("ID").style.backgroundColor="ffff00";
			break;
		case 3:
			document.getElementById("ID").style.backgroundColor="ff00ff";
			break;
		case 4:
			document.getElementById("ID").style.backgroundColor="00ffff";
			break;
		case 5:
			document.getElementById("ID").style.backgroundColor="0000ff";
			break;
	}
}
document.body.addEventListener("touchstart", touchStart, false);
}
// -->
</script>
</head>
<body onLoad="init()" style="-webkit-user-select: none;">
<div id="ID">
LET'S MULTI TOUCH!
<div>
</body>
</html>

iphone safari専用のJSを使っているので、iphoneで確認してください。
style="-webkit-user-select: none;"は、画面を押し続けたときに「コピー」と表示されないために必要。