問題タブ [pointer-events]

-ms-touch-action他のブラウザと同等のものは何ですか？

input type='text'テキスト入力 (または)の上にカスタム プレースホルダー テキスト要素を配置したいと思いますtextarea。ただし、プレースホルダーのテキスト要素がその真上にある場合、テキスト入力をクリック可能にする方法がわかりません。pointer-events:noneプレースホルダーをクリックできないようにする設定はうまく機能しますが、古いバージョンの IE ではサポートされていません。

通常、子要素のpointer-events:noneを手動でトリガーすることを含む回避策。onclickただし、テキスト入力の場合、onclickこれはブラウザーによって暗黙的に行われるため、トリガーするイベントはありません。

私が検討した他の解決策にはonclick、テキスト入力にフォーカスするためにプレースホルダーに を設定することが含まれますが、これは、カーソルが常に入力の最後に配置されることを意味します。テキスト入力をクリックして、クリックした場所にカーソルを表示できるようにしたい。

もう 1 つのオプションは、 を使用z-indexして入力の下にプレースホルダーを配置し、入力を透明にすることです。ただし、これは入力のデフォルトの境界線も削除するため、望ましくありません。

HTML/CSS と純粋な Javascript (jquery なし) のみを使用して、テキストがその上に表示されている場合でも、テキスト入力をクリック可能にするにはどうすればよいですか?

ポインター イベントは IE と Opera では機能しないため、jQuery を使用してポインター イベント機能を再作成しようとしています。

ホバーしたときに別の div がその上に表示される div があり、上の div がホバーされたときにアニメーションがトリガーされないように、ポインターイベントを持つことが重要です。

jQueryでこれを行う方法はありますか? 私はいくつかのこと（removeClass、mouseoutなど）を試しましたが、そこに到達できませんでした：

jQuery(試行):

HTML:

CSS:

ポインター イベントが「なし」に設定されている div があります。下の要素をクリックしても問題ありませんが、要素を右クリックして Chrome で調べると、一番上にある div が表示されます。他の誰かがこの問題を抱えていますか? それ以前の問題だった記憶がありません。

ウィンドウの下部にある静的な広告ティッカーを開発しました。これは、<iframe>他の人が自分のサイトにユニットを配置しやすくするためです。もう 1 つは、画面の下部に固定され<span>たままにします。<iframe>スクリプトには、タグ内にあるヘルプウィンドウがあります-内に<iframe>あり、可視/非表示プロパティを使用してテキストを表示または非表示にします。

コードが にある<iframe>ため、ヘルプ テキストはメイン ウィンドウに表示されません。これを回避するために、<iframe>大きくして透明に設定しました。

視覚的には、すべて問題ありません。ユーザーがティッカーのボタンをクリックすると、バックグラウンドでデータの上にヘルプ メニューが表示されます。ただし、セクションの下を通過するリンクがメイン ページにある場合、<span><iframe>クリックできないことがわかりました。CSS ポインターイベントを試してみましたが、うまくいきません (リンク内のリンク<iframe>もクリック可能にしておく必要があります) 。

どちらが「障害」を引き起こしているのか、つまり、<iframe>またはその周りのタグがわからない。「クリックジャッキング」(??) を停止するのはセキュリティ上のことですか、それとも回避策はありますか。

プッシュが押し寄せた場合、サイズを縮小し<iframe>、javascript ポップアップ ウィンドウを使用してヘルプ テキストを表示することができますが、それらのウィンドウには URL とステータス ウィンドウが表示され、正確にはエレガントではありません!

誰もが尋ねる前のコードは次のとおりです。このスパンは、画面全体を下層の高さまでカバーします<iframe>。データを中央に配置できるようにこれを行いました。

jQuery-UI 機能を新しい HTML5 ポインター イベントと「結合」しようとしていますが、今のところうまくいきません。たとえば、ドラッグ可能なサンプルをこれらのイベントで動作させるにはどうすればよいでしょうか? 高レベルの手順/方向の回答でもいただければ幸いです。

jQuery UI Touch Punchを試してみましたが、どのブラウザー (Lenovo X1 Carbon Touch、Windows 8.1、IE 11、Chrome 30) でもラップトップのタッチ イベントをまったくサポートしていないようです。iPad / iPhone などのモバイル プラットフォームをターゲットにしていると思いますが、ラップトップでも動作するものが必要です。

次に、 Heyman の Draggable Touchを試してみました。Chromeでは (ほとんどの場合) 動作しますが、IE ではあまり動作しません。ドラッグのサポートに限定されているため、たとえばサイズ変更可能な要素には適用されません。最後に、 HTML5 仕様のポインター イベントを使用しません(代わりに、「touchstart」やその他の「tocuh*」イベントを使用するため、ペンに反応しません。また、これらは標準仕様に含まれていないようです。 、または単に見つからないだけかもしれません)。

最後に、ポインター イベントのクロスブラウザー サポートを約束するHandJSを試しました。ページにスクリプトを追加しましたが、jQuery-UI のドラッグ可能な要素のタッチ ドラッグが有効になりませんでした。いつものようにマウスのドラッグは機能しますが、タッチは機能しません。、および を参照しています。jquery-2.0.3jquery-ui-1.10.3hand-1.2

div で選択したいくつかのマウス イベントのみを無効にしようとしています。

ここでの私の最終目標は、単一の画像をドラッグしてドラッグできる div を作成することです (これは簡単に実行できます) が、div が空の場合は、その下にあるものをドラッグできます。

CSS- Pointer-events: none; を使用しようとしました。ただし、すべてのイベントが無効になるため、ドラッグすることもできません。

z-index プロパティも試してみましたが、うまくいきませんでした。(より高い z-index を持つには div が必要です)

私はドラッグ アンド ドロップに HTML 5 を使用しています。Jquery やその他のソリューションは使用せず、そのまま維持したいと考えています。

助けてくれてありがとう

circleMarkerカスタムの都市名をマップに追加する必要があります。しかし、ラベルの下にポリゴンがあるため、ラベルをクリックしたい 追加するJSコードがありますcircleMarker

CSS では、ポインター イベントを無効にしています。

しかし、IE はサポートしておらずpointer-events、Label は SVG ではなく div 要素です。

誰かが静的な Label でポインターイベントを無効にする解決策を持っていますか?

ホバーできるリスト要素が透明な部分の後ろにある画像があります。画像はリスト要素の上になければなりません。これは、

画像上。

ただし、11 未満の IE バージョンはこのルールをサポートしていません。オンクリックイベント用の複数の JavaScript ソリューションを見つけることができましたが、リスト要素にカーソルを合わせただけでも機能するものはありません。

JsFiddle: http://jsfiddle.net/9Y9TH/2/

NAV 3 にカーソルを合わせると、ポップアップ サブメニューが表示されます。IE は pointer-events:none; をサポートしていないため、その上にある画像領域にカーソルを移動すると、IE でサブメニューが消えます。