モバイル Web 開発におけるタッチ イベント (詳細なチュートリアル)
ここで、モバイル 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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
appdataフォルダーをDドライブに移動できますか?
Feb 18, 2024 pm 01:20 PM
appdata フォルダーを D ドライブに移動できますか? コンピューターの使用が普及するにつれて、ますます多くのユーザーの個人データやアプリケーションがコンピューターに保存されています。 Windows オペレーティング システムには、ユーザーのアプリケーション データを保存するために使用される appdata フォルダーと呼ばれる特定のフォルダーがあります。多くのユーザーは、データ管理とセキュリティを考慮して、このフォルダーを D ドライブまたは他のディスクに移動できるかどうか疑問に思っています。この記事では、この問題について説明し、いくつかの解決策を提供します。まず、させてください
Python Web 開発フレームワークの比較: Django vs Flask vs FastAPI
Sep 28, 2023 am 09:18 AM
Python Web 開発フレームワークの比較: DjangovsFlaskvsFastAPI はじめに: 人気のあるプログラミング言語である Python には、選択できる優れた Web 開発フレームワークが多数あります。この記事では、Django、Flask、FastAPI という 3 つの人気のある Python Web フレームワークの比較に焦点を当てます。機能、使用シナリオ、コード例を比較することで、読者がプロジェクトのニーズに合ったフレームワークをより適切に選択できるようになります。 1.ジャンゴ
6000mAhのシリコンマイナスバッテリー！ Xiaomi 15Proアップグレードが再びリーク
Jul 24, 2024 pm 12:45 PM
7月23日のニュースによると、ブロガーのDigital Chat Stationは、Xiaomi 15 Proのバッテリー容量が6000mAhに増加し、90Wの有線フラッシュ充電をサポートしているというニュースを伝えました。これは、Xiaomiのデジタルシリーズで最大のバッテリーを搭載したProモデルになります。 Digital Chat Stationは以前、Xiaomi 15Proのバッテリーは超高エネルギー密度を持ち、シリコン含有量が競合製品よりもはるかに高いことを明らかにしました。 2023 年にシリコンベースの電池が大規模にテストされた後、第 2 世代のシリコン負極電池が業界の将来の発展方向として特定されており、今年は直接的な競争のピークを迎えます。 1. シリコンの理論グラム容量は 4200mAh/g に達することがあり、これはグラファイトのグラム容量の 10 倍以上です (グラファイトの理論グラム容量は 372mAh/g)。負極の場合、リチウムイオン挿入量が最大に達したときの容量が理論上のグラム容量であり、同じ重量下での容量を意味します。
Windows 11 でこの PC によるモバイル デバイスへのアクセスを停止または許可します
Feb 19, 2024 am 11:45 AM
Microsoft は、最新の Windows 11 バージョンで PhoneLink の名前を MobileDevice に変更しました。この変更により、ユーザーはプロンプトを通じてモバイル デバイスへのコンピュータ アクセスを制御できるようになります。この記事では、モバイル デバイスからのアクセスを許可または拒否するコンピューターの設定を管理する方法について説明します。この機能を使用すると、モバイル デバイスを設定してコンピュータに接続し、テキスト メッセージの送受信、モバイル アプリケーションの制御、連絡先の表示、電話の発信、ギャラリーの表示などを行うことができます。携帯電話を PC に接続することは良い考えですか?携帯電話を Windows PC に接続すると、機能やメディアを簡単に転送できる便利なオプションです。これは、モバイルデバイスが利用できないときにコンピュータを使用する必要がある人にとって便利です
アーキテクチャの再考: Web アプリケーション開発に WordPress を使用する
Sep 01, 2023 pm 08:25 PM
このシリーズでは、WordPress を使用して Web アプリケーションを構築する方法について説明します。これはコードを解説する技術シリーズではありませんが、フレームワーク、基礎、デザイン パターン、アーキテクチャなどのトピックを取り上げます。シリーズの最初の記事をまだ読んでいない場合は、それをお勧めしますが、この記事の目的として、前回の記事を次のように要約できます: つまり、ソフトウェアはフレームワーク上に構築でき、ソフトウェアはベースを拡張できます。 。簡単に言えば、フレームワークと基盤を区別します。この 2 つの用語は、同じものではありませんが、ソフトウェアでは同じ意味でよく使用されます。 WordPress はそれ自体がアプリケーションであるため、基盤となります。それは枠組みではありません。このため、WordPress に関して言えば、
国産FPSの新たな王者！ 「オペレーション・デルタ」の戦場は予想を超える
Mar 07, 2024 am 09:37 AM
「オペレーション デルタ」は本日（3月7日）より大規模PCテスト「コードネーム：ZERO」を開始する。先週末、上海で本作のオフラインフラッシュモブ体験イベントが開催され、幸運にも17173さんも参加することができました。前回のテストからわずか 4 か月以上しか離れていないため、この短期間で「オペレーション デルタ」がどのような新たなハイライトやサプライズをもたらすのか、興味が湧きます。 4か月以上前、私はオフライン試食会と最初のベータ版で「オペレーション デルタ」を体験しました。当時、ゲームは「危険なアクション」モードのみを開きました。しかし、デルタ作戦は当時としてはすでに印象的なものでした。大手メーカーがモバイルゲーム市場に群がる中、国際基準に匹敵するFPS
他の Web 開発言語と比較した C++ の長所と短所は何ですか?
Jun 03, 2024 pm 12:11 PM
Web 開発における C++ の利点には、速度、パフォーマンス、低レベル アクセスが含まれますが、一方で、急峻な学習曲線やメモリ管理要件などの制限もあります。 Web 開発言語を選択する場合、開発者はアプリケーションのニーズに基づいて C++ の利点と制限を考慮する必要があります。
Honor Magic6 RSR Porsche Designが1TBで9,999元で正式に販売中
Mar 22, 2024 pm 03:03 PM
最近、Honor Mobile は新製品発表会を開催し、Honor Magic6RSR Porsche Design を正式に発表しました。 3月22日、CNMOは、Honor Magic 6 RSR Porsche Designが正式に販売開始され、24GB + 1TBバージョンのみが9,999元で入手可能であることを知りました。 Honor Magic6 RSR は、ポルシェ スーパー スポーツカーのクラシックな要素からインスピレーションを得たポルシェ デザインの外観を採用しています。バックラインのデザインはポルシェのフライングラインデザインからインスピレーションを得ており、カメラモジュールには象徴的な六角形のデザインを採用し、独特の立体感と躍動感を与えています。また、ポルシェオリジナルマスターによってカラーチューニングされたアゲートグレーとアイスベリーピンクの2色を用意し、その独特なデザイン美をさらに際立たせています。スクリーン技術に関しては、Honor Magic6RSR が維持しています。
