この記事では、主にモバイル Web 開発におけるタッチ イベントの例について詳しく説明します。参考になると思います。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
前の言葉
iOS 用 Safari は、開発者に特別な情報を伝えるために、いくつかの新しい限定イベントを追加しました。 iOS デバイスにはマウスもキーボードもないため、モバイル Safari 用のインタラクティブな Web ページを開発する場合、通常のマウスとキーボードのイベントだけでは十分ではありません。 Android に WebKit が追加されたことで、これらの独自イベントの多くが事実上の標準となり、W3C が Touch Events 仕様の開発を開始することになりました。この記事では、モバイル タッチ イベントについて詳しく紹介します
概要
iOS 2.0 ソフトウェアを搭載した iPhone 3G がリリースされたとき、新しいバージョンの Safari ブラウザも搭載されました。この新しいモバイル Safari では、タッチ操作に関連するいくつかの新しいイベントが提供されます。その後、Android 上のブラウザーにも同じイベントが実装されました。タッチ イベントは、ユーザーが指を画面上に置いたり、指を画面上でスライドさせたり、指を画面から遠ざけたりするとトリガーされます。具体的には、次のタッチ イベントがあります
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动
touchend:当手指从屏幕上移开时触发
touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间，文档中没有明确说明
ログイン後にコピー
[touchenter および touchleave]
かつて、タッチ イベントの仕様には、ユーザーの指が要素の内外に移動したときにトリガーされる touchenter および touchleave イベントが含まれていました。しかし、これら 2 つの出来事は実現することはありませんでした。 Microsoft はこれら 2 つのイベントに代わるイベントを用意していますが、これらをサポートしているのは IE だけです。場合によっては、ユーザーの指が要素に出入りするかどうかを知ることが非常に役立つため、これら 2 つのイベントが標準に戻ることを願っています
タッチ イベントでは、一般的に使用される 3 つのイベントは、touchstart、touchumove、touchend です。マウスイベントに対応するイベントは以下のとおりです
鼠标 触摸
mousedown touchstart
mousemove touchmove
mouseup touchend
ログイン後にコピー
[注意] DOM0レベルのイベントハンドラを使用してイベントを追加するChromeシミュレータでは、一部のバージョンではタッチイベントが無効です
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test{height:200px;width:200px;background:lightblue;}
</style>
</head>
<body>
<p id="test"></p>
<script>
(function(){
var
stateMap = {
touchstart_index : 0,
touchmove_index : 0,
touchend_index : 0
},
elesMap = {
touch_obj: document.getElementById('test')
},
showIndex, handleTouch;
showIndex = function ( type ) {
elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']);
};
handleTouch = function ( event ) {
showIndex( event.type );
};
elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);});
})();
</script>
</body>
</html>ログイン後にコピー
300ms
300 ミリ秒問題とは、要素がその機能を実行してからタッチ イベントを実行するまでの 300 ミリ秒の間隔を指します。タッチイベントと比較して、マウスイベント、フォーカスイベント、ブラウザのデフォルト動作などはすべて300ミリ秒の遅延があります
【クリックスルー】
300ミリ秒の存在により、一般的なクリックスルーの問題が発生します。まずは例を見てみましょう
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
</style>
</head>
<body>
<a href="https://baidu.com">百度</a>
<p id="test"></p>
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
fnHide();
};
elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);});
})();
</script>
</body>
</html>ログイン後にコピー
水色の半透明の p をクリックした後 (タッチ イベントをトリガー)、クリック位置がリンクの真上にある場合、リンク ジャンプのデフォルトの動作がトリガーされます。詳細な説明は、ページをクリックした後、ブラウザーがクリックされたページの座標を記録し、300 ミリ秒後にその座標で要素が見つかるというものです。この要素のクリック動作をトリガーします。したがって、同じページ座標の上部の要素が 300 ミリ秒以内に消えると、300 ミリ秒後に下部の要素でクリック動作がトリガーされます。これにより、クリックスルーの問題が発生します
この問題は、画面をタッチする動作が過負荷になるために発生します。指が画面に触れた瞬間、ブラウザはユーザーがタップ、ダブルタップ、スライド、ホールドなどの操作をしているかどうかを予測できません。唯一の安全な方法は、しばらく待って次に何が起こるかを確認することです
問題はダブルタップです。ブラウザは、指が画面から離れたことを検出したとしても、次に何をすべきかを知る方法がありません。ブラウザーには、指が再び画面に戻るかどうか、またはタップ イベントとイベント カスケードのトリガーが終了するかどうかを知る方法がないからです。これを判断するには、ブラウザは短時間待機する必要があります。ブラウザ開発者は、300 ミリ秒という最適な時間間隔を発見しました
[解決策]
1. タッチ イベントのイベント ハンドラーに 300 ミリ秒の遅延を追加します
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
setTimeout(function(){
fnHide();
},300);
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();ログイン後にコピー
2. イージング アニメーションを使用して、300 ミリ秒のトランジション効果を増やします。表示属性はtransitionを使用できないことに注意してください
3. 中間層にdom要素を追加し、中間層にこの貫通イベントを受け入れさせ、後で非表示にします
4. 上層と下層の両方でタップイベントを使用します。デフォルトの動作は使用できません
5 を避けてください。ドキュメント上の touchstart イベントにより、デフォルトの動作が妨げられます。
document.addEventListener('touchstart',function(e){
e.preventDefault();
})ログイン後にコピー
次に、aタグのジャンプ動作を追加します
a.addEventListener('touchstart',function(){
window.location.href = 'https://cnblogs.com';
})ログイン後にコピー
ただし、このメソッドには副作用があり、ページがスクロールできなくなったり、テキストが選択できなくなったり、等特定の要素のテキスト選択動作を復元する必要がある場合は、バブリング防止を使用して復元できます
el.addEventListener('touchstart',function(e){
e.stopPropagation();
})ログイン後にコピー
イベントオブジェクト
【基本情報】
各タッチイベントのイベントオブジェクトは以下を提供しますイベント タイプ、イベント ターゲット オブジェクト、イベント バブリング、イベント フロー、デフォルト動作などを含む、マウス イベントの一般的な属性。
タッチスタートを例として、サンプル コードは次のとおりです。
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
console.log(e)
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();
</script>ログイン後にコピー
1。イベントを返します。実行中のリスニング関数にバインドされたノード
2. target 属性は、イベントの実際のターゲット ノードを返します
3。srcElement 属性は、target 属性と同じ機能を持ちます
。
//当前目标
currentTarget:[object HTMLpElement]
//实际目标
target:[object HTMLpElement]
//实际目标
srcElement:[object HTMLpElement]
ログイン後にコピー
4、eventPhase属性返回一个整数值，表示事件目前所处的事件流阶段。0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
5、bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性
6、cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性
//事件流
eventPhase: 2
//可冒泡
bubbles: true
//默认事件可取消
cancelable: true
ログイン後にコピー
【touchList】
除了常见的DOM属性外，触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组
1、touches：当前触摸屏幕的触摸点数组（至少有一个触摸在事件目标元素上）
2、changedTouches ：导致触摸事件被触发的触摸点数组
3、targetTouches：事件目标元素上的触摸点数组
如果用户最后一个手指离开屏幕触发touchend事件，这最后一个触摸点信息不会出现在targetTouches和touches数组中，但是会出现在changedTouched数组中。因为是它的离开触发了touchend事件，所以changedTouches数组中仍然包含它。上面三个数组中，最常用的是changedTouches数组
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
elesMap.touchObj.innerHTML = 'touches:' + e.touches.length
+ '<br>changedTouches:' + e.changedTouches.length
+ '<br>targetTouches:' + e.targetTouches.length;
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();ログイン後にコピー
【事件坐标】
上面这些触摸点数组中的元素可以像普通数组那样用数字索引。数组中的元素包含了触摸点的有用信息，尤其是坐标信息。每个Touch对象包含下列属性
clientx:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:标识触摸的唯一ID
pageX:触摸目标在页面中的x坐标（包含滚动）
pageY:触摸目标在页面中的y坐标（包含滚动）
screenX:触摸目标在屏幕中的x坐标
screenY:触摸目标在屏幕中的y坐标
target:触摸的DOM节点目标
ログイン後にコピー
changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象(通常这个触摸点数组不包含其他对象)。这个触摸点对象含有clientX/Y和pageX/Y坐标信息。除此之外还有screenX/Y和x/y，这些坐标在浏览器间不太一致，不建议使用
clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对于布局视口的左上角。布局视口是可以滚动的
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
var touch = e.changedTouches[0];
elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY
+ '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY
+ '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();ログイン後にコピー
相关推荐：
JS手机端touch事件计算滑动距离的方法
有关touch事件解析和封装的知识
javascript移动设备Web开发中对touch事件的封装实例_javascript技巧
以上がWeb開発におけるタッチイベント例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
