2012-10-29 5 views
6

私は自分のウェブサイト上にGoogle Mapsの地図を持っていますが、Microsoft Surfaceタブレットでそれを使用すると、ブラウザによって「パン」ジェスチャがインターセプトされ、次のブラウザウィンドウに移動しようとします。ブラウザでパン(ドラッグイベント)を無視して、マップが正常に動作するようにするにはどうすればよいですか? maps.google.comに行くと、マップは完全にドラッグ可能であるため、Googleが採用する回避策が必要です。Microsoft Surface:ブラウザでインターセプトされずにJavaScriptのタッチ/ドラッグイベントが動作するようにするにはどうすればよいですか?

+0

実際に正しく動作するようにしましたか?私はまだ同じ問題に直面しており、運がないすべての要素に 'touch-action' CSSルールを適用しようとしました。 – Mark

答えて

12

「ポインタとジェスチャーのイベント」(ここではhttp://msdn.microsoft.com/en-us/library/ie/hh673557%28v=vs.85%29.aspx#Panning_and_zooming)のMSのガイドによると、「-ms-touch-action」ルールを「false」に設定してパンニングを無効にする要素にCSSクラスを追加する必要があります。このようなし」:

W3Cのポインタイベント候補recomendationで提案されている非接頭辞タッチアクションプロパティは、今がある
.disablePanZoom 
{ 
    -ms-touch-action: none; /* Shunt all pointer events to JavaScript code. */ 
} 

--EDIT--

MSDN documentationから

:Internet Explorerの11、このイベント(-ms-タッチアクション)のマイクロソフトのベンダー接頭辞バージョンのよう

はサポートされなくなり、将来のリリースで除去することができます。その代わりに、接頭辞のない名前のタッチアクションを使用します。これは、標準準拠と将来の互換性のために優れています。

+0

私が見つけたベストワーキングソリューション。 –

+1

互換性を最大限に高めるために、両方を行うことができると付け加えます。 '.disablePanZoom { -ms-touch-action:none; タッチアクション:なし; } ' – JoeDuncan

関連する問題