web-dev-qa-db-ja.com

モバイルSafari / Webviewのタッチスタートで灰色のオーバーレイを防ぐ

私はWebkitでiOSアプリを構築しているので、UI全体がWebビューです。 Webビューの外側の境界に近い要素（touchStartイベントがバインドされていない要素）のtouchStartで、Webビューの全領域に半透明の灰色のボックスがオーバーレイされます。原因として-webkit-tap-highlight-colorまたは-webkit-touch-calloutを削除しました。この動作を削除するにはどうすればよいですか？

ioswebkitmobile-safari
30
Andrew Shooner

このスタイルを置くだけで、デフォルトのアクションがありますが、灰色のオーバーレイはありません

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

アクションパネルを削除したい場合は、これを置いてください

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

そして、あなたは行き​​ます！ついにきれいなリンク！

73
Kornelius

私の実用的な解決策は、htmlドキュメントの本文のtouchstartイベントでDefaultをキャプチャして防止することです。他のすべてのより明示的なイベントハンドラーは影響を受けません。 select要素で問題が発生しました。これは、bodyイベントハンドラーで対処しました（jQueryを使用しています）。

$('body').live(
'touchstart', 
function(e){
    if(e.target.localName != 'select'){
        e.preventDefault(); 
    }
}

）

7
Andrew Shooner