[TEST] createTouchEvent

keeeeei

2012-02-25 16:32:47

License: MIT License

Fork: 0

Fav: 1

View: 7625

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 66 lines
HTML 3 lines
CSS 3 lines

iOSとAndroid、タッチイベント生成のあれこれ。

実機でアクセスすると、検証できます。

[TEST] createTouchEvent

(function () {
	var ua = /iPhone|iP[oa]d/.test(navigator.userAgent)
		? 'iOS'
		: /Android/.test(navigator.userAgent)
			? 'Android'
			: 'PC'
	;

document.addEventListener('DOMContentLoaded', function (event) {
		if(ua == 'PC'){
			return;
		}

document.addEventListener('touchstart', function () {
			alert('Touch!');
		}, false);
		
		var touchEvent = createTouchEvent();
		
		setTimeout(function () {
			document.dispatchEvent(touchEvent);
		}, 3000);
		
	}, false);

function createTouchEvent (option) {
	    	option = option || {};
		var param = {
			type: 'touchstart',
			canBubble: true,
			cancelable: true,
			view: window,
			detail: 0,
			screenX: 0,
			screenY: 0,
			clientX: 0,
			clientY: 0,
			ctrlKey: false,
			altKey: false,
			shiftKey: false,
			metaKey: false,
			touches: 0,
			targetTouches: 0,
			changedTouches: 0,
			scale: 0,
			rotation: 0,
		    	touchItem: 0
		}

for(var i in param) if(param.hasOwnProperty(i)){
			param[i] = option[i] !== undefined
				? option[i]
				: param[i]
			;
		}

var event = document.createEvent('TouchEvent');

if(ua === 'Android'){
			event.initTouchEvent(param.touchItem, param.touchItem, param.touchItem, param.type, param.view, param.screenX, param.screenY, param.clientX, param.clientY, param.ctrlKey, param.altKey, param.shiftKey, param.metaKey);
		}else{
			event.initTouchEvent(param.type, param.canBubble, param.cancelable, param.view, param.detail, param.screenX, param.screenY, param.clientX, param.clientY, param.ctrlKey, param.altKey, param.shiftKey, param.metaKey, param.touches, param.targetTouches, param.changedTouches, param.scale, param.rotation);
		}
		return event;
	}
})();

[TEST] createTouchEvent

iOSとAndroid、タッチイベント生成のあれこれ。実機でアクセスすると、検証できます。(function () { var ua = /iPhone|iP[oa]d/.test(navigator.userAgent) ? 'iOS' : /Android/.test(navigator.userAgent) ? 'Android' : 'PC' ; document.addEventListener('DOMContentLoaded', function (event) { if(ua == 'PC'){ return; } document.addEventListener('touchstart', function () { alert('Touch!'); }, false); var touchEvent = createTouchEvent(); setTimeout(function () { document.dispatchEvent(touchEvent); }, 3000); }, false); function createTouchEvent (option) { option = option || {}; var param = { type: 'touchstart', canBubble: true, cancelable: true, view: window, detail: 0, screenX: 0, screenY: 0, clientX: 0, clientY: 0, ctrlKey: false, altKey: false, shiftKey: false, metaKey: false, touches: 0, targetTouches: 0, changedTouches: 0, scale: 0, rotation: 0, touchItem: 0 } for(var i in param) if(param.hasOwnProperty(i)){ param[i] = option[i] !== undefined ? option[i] : param[i] ; } var event = document.createEvent('TouchEvent'); if(ua === 'Android'){ event.initTouchEvent(param.touchItem, param.touchItem, param.touchItem, param.type, param.view, param.screenX, param.screenY, param.clientX, param.clientY, param.ctrlKey, param.altKey, param.shiftKey, param.metaKey); }else{ event.initTouchEvent(param.type, param.canBubble, param.cancelable, param.view, param.detail, param.screenX, param.screenY, param.clientX, param.clientY, param.ctrlKey, param.altKey, param.shiftKey, param.metaKey, param.touches, param.targetTouches, param.changedTouches, param.scale, param.rotation); } return event; } })();<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <p>3秒後にタッチイベントが生成されますよー。</p> <p class="red">※Android,iOSでご確認ください。</p>body { background-color: #DDDDDD; font: 20px sans-serif; } .red { color: #f00; };

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/p3Mf/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/keeeeei/p3Mf" title="[TEST] createTouchEvent ">[TEST] createTouchEvent  - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code