スケーリングを無効にする
ある日、複雑な操作機能を盛り込んだページを一生懸命作っていたのですが、公開後、多くの機能が使えないというユーザーからのフィードバックがありました。どこかにバグがあるのかと思ってビックリ。
すぐにユーザーに連絡しましたが、ユーザーがタッチパッドを無効にせずにラップトップを使用した後、誤ってラップトップに触れたため、インターフェイス全体が拡大し、インターフェイス以外の多くの機能が欠落していたことがわかりました。
しかし、何ができるかはユーザーが第一であり、当然この問題は早急に解決しなければならず、タッチパッドとタッチスクリーンの両方を解決しなければなりません。
従来、モバイル機器のタッチスクリーンで指でズームイン・ズームアウトする機能を無効にしたい場合は、それを使って対処することを考えるでしょうviewport 。次のように：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
ただし、現在のブラウザーは viewport ズーム無効の定義をサポートしていません。このコードを使用することは完全に無効です. 問題を解決するには、新しい解決策を考えなければなりません.
言うまでもありませんが、次は最初に具体的な解決策を示します。
タッチパッド
トラックパッドのズーム動作を無効にするには、マウス ホイール イベントを処理する必要があります: wheel .
ノートブック タッチパッドの 2 本指スライドはこのイベントに応答するため、このイベントの既定の動作を防止すると、スケーリングの問題を解決できます。
注：passive: false 使用する必要があります。以下に紹介します。
さらに、 document スクロール ホイール イベントを処理した後、イベントがバブルを伝播するため、ページ上の他のサブ要素に注意を払う必要があります。スクロール バーなどがある場合は、サブ要素のバブルを防止する必要があります。そうしないと、スクロールが失敗します。
// 触摸板禁止手指缩放
document.addEventListener('wheel', function(event) {
event.preventDefault()
}, { passive: false })
// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('wheel', function(event) {
// event.stopPropagation()
// })
タッチスクリーン
CSS タッチ スクリーンで指のズームを無効にするには、次の 2 つの方法を使用できます JS 。
css処理
ページで CSS スタイルを使用している限り touch-action: none、携帯電話やタブレットで Web のズームを無効にすることができます。
<html style="touch-action: none;">
注:
html 要素で使用すると touch-action: none 、ページのズームを禁止できます。これは、このスタイル属性が非継承属性であり、ページのサブ要素のジェスチャ操作に影響を与えないためです。
グローバル アクションを使用すると * {touch-action: none;} 、子要素のさまざまなジェスチャに影響します。
js処理
js コードを使用して、タッチ スクリーンの指のズームを禁止します。これは、タッチパッドの操作に似ています。ここでは、主に touchstart、touchend、touchmove などの複数のジェスチャ イベントを監視します。
注: 注意が必要なのは、タッチパッドを処理する場合と同じで、加えて、 { passive: false }子要素のバブリングを防止することです。
document.addEventListener('touchstart', function(event) {
event.preventDefault()
}, { passive: false })
// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('touchstart', function(event) {
// event.stopPropagation()
// })
拡張解釈
タッチアクション
非継承属性、デフォルト
auto。
タッチスクリーン ユーザーが要素を操作する方法を設定する領域で、タッチしたときにスクロールを制御できます。
たとえば、ブラウザに組み込まれているズーム機能。
これには、これらのジェスチャを自分で実装できるという利点もあります。
最新のブラウザはすべてこの属性をサポートしていますが、一部の属性値は chrome でのみサポートされています。
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation;
touch-action 属性値
- auto
要素でタッチ イベントが発生した場合、ビューポートのスムージングやズームなど、どの操作を実行するかはブラウザによって決定されます。 - なし
要素でタッチ イベントが発生した場合、何もしません。 - pan-x
1 本指の水平パン ジェスチャを有効にします。パンイ、パンアップ、パンダウン、ピンチズームと組み合わせることができます。 - pan-y は、
1 本指の垂直パン ジェスチャを有効にします。pan-x、pan-left、pan-right、および/または pinch-zoom と組み合わせることができます。 - これはマニピュレーションの別名
ですpan-x pan-y pinch-zoom。
ブラウザーでは、スクロール操作と連続ズーム操作のみが許可されます。auto 値でサポートされているその他の動作はサポートされていません。
パンとピンチのズーム ジェスチャを有効にしますが、ダブルタップしてズームするなどの他の非標準ジェスチャを無効にします。
ダブルタップによるズームを無効にすると、ユーザーが画面をタップしたときにブラウザーがクリック イベントの生成を遅らせる必要がなくなります。
タッチ アクションは、ダブルタップ ズーム ジェスチャのサポートによって発生するタップ イベントの遅延を完全に解決するためにもよく使用されます。 - pinch-zoom を
使用すると、複数の指でページをパンおよびズームできます。
これは、任意の翻訳値と組み合わせることができます。 - pan-left、pan-right、pan-up、pan-down
指定された方向にスクロールを開始する 1 本指のジェスチャを有効にします。スクロールが開始されると、方向が逆になる場合があります。
複数の方向を組み合わせることができます。
スクロールアップ (パンアップ) は、ユーザーが画面上で指を下にドラッグしていることを意味し、同様に、パン左は、ユーザーが指を右にドラッグしていることを意味します。
これらの値は互換性が低く、Chrome でサポートされていますが、IE\Firefox\Safari ではサポートされていません。
wheel と mousewheel
mousewheel これは標準機能ではなく、ie や chrome などのブラウザーでサポートされていますが、 firefox サポートされていません。firefox カスタム DOMMouseScroll イベントをサポートします。
wheel これは、基本的に最新のブラウザーでサポートされている標準機能であり、 wheel 代わりに使用することをお勧めします。
ノートブックのタッチパッドを 2 本の指でスライドすると、スクロール ホイール イベントに応答するため、このイベントをリッスンして、タッチパッドの指のズーム インターフェイスを無効にすることができます。
ただし、スクロール ホイールのデフォルト イベントに注意する必要があります。子要素のスクロールが失敗する場合は、同じイベントが子要素でバブリングしないようにする必要があります。
受け身
passive イベントリスナー関数からプロパティ値として取得される addEventListener オプションのプロパティ ですoptions。addEventListener の 3 番目の属性もブール値を取ることができ、バブルできるかどうかを示します。
3 番目のパラメーターについては、IE はブール値のみをサポートし、属性オブジェクトはサポートしていないことに注意してください options。また、一部の属性値はブラウザーでサポートされていません。
target.addEventListener(type, listener, options);
オプション パラメータ
オプションのパラメーターで使用できるプロパティは次のとおりです。
- capture: ブール値。このタイプのイベント キャプチャ フェーズが EventTarget に伝播するときに、リスナーがトリガーされることを示します。
- once: ブール値。リスナーが追加された後、最大で 1 回呼び出されることを示します。true の場合、リスナーは呼び出された後に自動的に削除されます。
- signal: AbortSignal。この AbortSignal の abort() メソッドが呼び出されると、リスナーが削除されます。Safari ではサポートされていません。
- mozSystemGroup: It can only be used in XBL or Firefox' chrome. これはブール値で、リスナーがシステム グループに追加されることを示します。
- passive : ブール値で、true に設定すると、リスナーが preventDefault() を呼び出さないことを意味します。
passived 実際、イベント リスナーを使用して preventDefault 既定の動作を防止するかどうかをブラウザーに通知し、ブラウザーがパフォーマンスを最適化できるようにします。特に、ブラウザはページ スクロールのパフォーマンスを最適化し、ページ スクロールをよりスムーズにすることができます。
Chromewheel / touch などでは、イベントは passive デフォルトで true に設定されますが、Safari ではサポートされていません。 パラメータを true に
追加する と、 イベントはページのスクロールをブロックしなくなります (同じことがマウス ホイール イベントにも当てはまります)。passivetouchmove
passive true に設定されていても が listener 呼び出された 場合 preventDefault、ブラウザー クライアントはそれを無視し、コンソール警告をスローします。
パッシブ イベント リスナーの呼び出し内でデフォルトを防止できません。
考えられるエラー
ターゲットがパッシブとして扱われるため、パッシブ イベント リスナー内で Default を防ぐことができません。
ターゲットはパッシブと見なされるため、パッシブ イベント リスナーでデフォルトの動作を防ぐ方法はありません。
考えられる発生シナリオ:touch事件モバイル端末を使用した後、垂直方向にパンするとエラーが報告されます。
方法 1: touch-action スタイルを使用して垂直方向の移動の既定の動作を無効にする
touch-action: pan-y;
方法 2: 監視中に touch事件 明示的に false に設定し passive 、パッシブではないことを宣言します。
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, { passive: false });