H5-12__タッチアンドクリック: 基本的なイベント処理-H5 チュートリアル-php.cn

H5-12__タッチアンドクリック: 基本的なイベント処理

黄舟

リリース： 2017-02-18 15:01:03

オリジナル

1401 人が閲覧しました

HTML5 では、マウスベースのインターフェイスの操作がクリックである場合、タッチインターフェイスの基本的な操作方法はタップです。

1. タップとクリックは似ていますが、違いもあります。

タッチの場合でもマウスを持たないデバイス (携帯電話など) の場合でも、ブラウザはマウスイベントをトリガーし、クリック、マウスオーバー、マウスダウン、マウスアップはすべてトリガーされます。

2. モバイルブラウザには 4 種類のタッチイベントがあります

イベント名	説明	タッチ配列が含まれます
touchstart	Touch start	は
タッチムーブです	タッチポイント変更	はい
タッチエンド	タッチエンド	はい
タッチキャンセル	タッチキャンセル	いいえ

touches 配列は、タッチイベントによって生成されるタッチオブジェクトのセットで、画面にタッチする指を表します。

3. タッチイベントの処理

最初の方法は、ブラウザでサポートされている標準のタッチイベントを使用することです。index.html の例を参照してください。 : 携帯電話では、タッチイベントには反応しますが、クリックイベントには反応しません

PCブラウザではその逆です

2番目の方法は、イベントをカスタマイズすることです

addEvent リスナーを使用して、イベントがトリガーされるタイミングとイベントの動作を定義します。手順は次のとおりです。カスタムイベント

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<title>Touch</title>
	<style type="text/css" media="screen">
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			text-align: center;
		}
		
		.button {
			font-size: 16px;
			padding: 10px;
			font-weight: bold;
			border: 0;
			color: #fff;
			border-radius: 10px;
			box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000;
			background: #ff3019;
			opacity: 1;
		}
		
		.active, .button:active {
			box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;
		}

		.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<p id="touchme">
		<button class="button" id="toggle">切换图片</button>
		<p class="hidden" style="display: none">
			<p>Goldfinch by ibm4381 on Flickr</p>
			<a href="http://www.flickr.com/photos/j_benson/3504443844/" 
				title="Goldfinch by ibm4381, on Flickr">
				<img src="http://www.php.cn/" 
					width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>
<script type="text/javascript" charset="utf-8">
	var node = document.getElementById(&#39;toggle&#39;);
	
	function togglePicture(){
		var h = document.querySelector(".hidden");
		if(h.style.display == "none") {
			h.style.display = "block";
		} else {
			h.style.display = "none";
		}
	}
	
	node.addEventListener(&#39;touchstart&#39;, function(e){
		alert("touchstart");
		//阻止事件的默认行为导致按钮不会出现活跃状态(active)
//		e.preventDefault();
		e.target.className = "active button";
		togglePicture();
	});
	
	node.addEventListener(&#39;touchend&#39;, function(e){
		//e.preventDefault();
		e.target.className = "button";
	});
	
	node.addEventListener("click", function(e){
		alert("click");
	});
</script>
</html>

ログイン後にコピー

initCustomEvent メソッドは次のとおりです

●

イベントの名前

●

イベントがバブルするかどうか

●

かどうかイベントをキャンセルできます

●

詳細データ、初期化イベント中に任意のデータが渡されます2. タッチスタートリスナーを追加する必要があり、クリック（クリック）はまだ利用できません。したがって、タッチイベントがサポートされているかどうかを検出する必要があります。そうでないと、マウスイベントとの互換性が低下します。

node.addEventListener("tap",  function(e){
    togglePictrue();
});
node.addEventListener("touchstart",  function(e){
     var tap = document.createEvent("CustomEvent");
    tap.initCustomEvent("tap",  true,  true,  null);
    node.dispatchEvent(tap);
});

ログイン後にコピー

上記のメソッドを呼び出すコードは次のようになります:

この二つを通じて手順、要件は基本的に満たされています。

完全なコードは次のとおりです。重要なことに、変更を加えることなくデスクトップコンピュータで動作します。

上記は、H5 12__ タッチアンドクリック: 基本的なイベント処理の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。