ホームページ > 記事 > ウェブフロントエンド > H5-12__タッチ アンド クリック: 基本的なイベント処理
H5-12__タッチ アンド クリック: 基本的なイベント処理
- 黄舟オリジナル
- 2017-02-18 15:01:031349ブラウズ
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('toggle');
function togglePicture(){
var h = document.querySelector(".hidden");
if(h.style.display == "none") {
h.style.display = "block";
} else {
h.style.display = "none";
}
}
node.addEventListener('touchstart', function(e){
alert("touchstart");
//阻止事件的默认行为导致按钮不会出现活跃状态(active)
// e.preventDefault();
e.target.className = "active button";
togglePicture();
});
node.addEventListener('touchend', 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) に注目してください。