ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイルブラウザの長押しイベントをブロック_html/css_WEB-ITnose
モバイルブラウザの長押しイベントをブロック_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:492132ブラウズ
最近、読み込んだ後に画像が消えるWebページを作りました。画面を長押しして動かすと、ゆっくりと画像が表示され、手を離すとすぐに画像が砕けて消えます。
しかし、画像を長押しするとブラウザ独自の長押しイベントが発生することが分かりました：
1. add event ontouchstart = "return false;"
2 css を統一して -webkit-user-select:none; -webkit-touch-callout:none; を追加します
しかし、上記の方法はページの他の要件に影響を与えるため、最終的には次のように書くことになりました。システムの長押しイベントを回避するために、空の透明な DIV をページの上部に配置します。DIV スタイルを非表示にします: {position:fixed;width:100%。 ;height:100%;z-index: 99;background:rgba(255,255,255,0);overflow:hidden;top:0px;left:0px;}
PS: プロセス中に小さな問題にも遭遇しました。これは、QR コードを長押しして識別する必要があるページで、現在のページのマスク DIV が削除されていますが、長押ししてもまだ応答がありません。
QR コードの開始スタイルは: {width:46%;position:fixed;left:27%;top:40%;}
後になって、QR コードはレイヤーの高さ z- で追加する必要があることがわかりました。 Index:100; カバーより大きい DIV の高さをカバーします。