Webアプリでの画面タッチによるいろいろな操作を制限してみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 最近、タッチ型PC端末を店頭に設置して不特定多数の人がタッチにより操作するWebアプリケーションを実装する機会があり、その中で下記のタッチ操作を無効にしたいという要望がありました。 ピンチズーム：2本指でタッチすると画面がズームイン/ズームアウトできてしまう。 スワイプ：左右にスワイプするとブラウザの「戻る」「進む」ができてしまう。 テキスト選択：テキストを長押しすると選択でき、そのままweb検索ができてしまう。 右クリック：長押しすると右クリックメニューが出てしまう。 そこで今回は、Webアプリケーションで画面タッチによるいろいろな操作を制限（無効化）する方法を確認してみました。 ピンチズーム ピンチズーム操作はJavaScript（TypeScript）で以下の記述をすれば制限可能です。 const touchHandler = (e
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
