ホームページ > 記事 > ウェブフロントエンド > モバイル Web 開発におけるタッチ イベント (詳細なチュートリアル)
モバイル Web 開発におけるタッチ イベント (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-11 16:42:131888ブラウズ
ここで、モバイル 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
[注意] Chromeシミュレータのタッチイベントの一部のバージョンでは、DOM0レベルのイベントハンドラを使用してイベントを追加していますが、これは無効です
<!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
300ms問題要素がその機能を実行してからタッチ イベントを実行するまでには 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();
})イベントオブジェクト
【基本情報】
各タッチイベントのイベントオブジェクトは共通で提供されていますマウス イベントの属性には、イベント タイプ、イベント ターゲット オブジェクト、イベント バブリング、イベント フロー、デフォルト動作などが含まれます。
touchstart を例に取ると、サンプル コードは次のとおりです
<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。 currentTarget 属性は、次のリスニング関数を返します。イベントが実行されています。バインドされたノード
2. target 属性は、イベント
の実際のターゲット ノードを返します。eventPhase 属性は、整数値を返します。 、イベントが現在存在するイベント フロー ステージを示します。 0 はイベントが発生しなかったことを示し、1 はキャプチャ ステージを示し、2 はターゲット ステージを示し、3 はバブリング ステージを示します。 5. bubbles 属性は、現在のイベントがバブリングするかどうかを示すブール値を返します。この属性は読み取り専用属性です
6. cancelable 属性は、イベントをキャンセルできるかどうかを示すブール値を返します。この属性は読み取り専用です
//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
【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); });
})();上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中使用$http实现异步上传Excel文件方法
以上がモバイル Web 開発におけるタッチ イベント (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。