問題タブ [pointer-events]

今、私は一つの問題に苦しんでいます。以下に示すコードを見てください。私は 2 つの機能を実装したいと考えています。マウスがその上にあります。

しかし、rect の "pointer-event" の値を all に設定すると、ズームはうまくいきますが、ノードはマウスオーバー イベントをキャッチできません。値を「なし」に設定すると、ノードはマウスオーバー イベントをキャッチできますが、ズームは機能しません。「nodes」と「rect」は別のレイヤーにあるようで、同時にイベントをキャッチすることはできません。

誰でもこれを修正する方法を知っていますか? 前もって感謝します。

ボタンでdivをオーバーレイするSVGがあります。「pointer-events: none;」を設定することで、SVG を介してマウスイベントを渡すことができることを知っています。私のSVG用。ただし、これを行うと、SVG はマウスイベントを認識しなくなります。

マウスがその上にあるときにSVGが認識できるようにしたいが、クリックをその下の要素(div/ボタン/ ...)に渡す。したがって、私の SVG はホバー イベントのターゲットのみであり、ボタンはクリック イベントのターゲットである必要があります。

他のいくつかのアプローチの中で、私は次のように試しました: - 何も機能しませんでした。

アイデアは、マウスボタンを押したときにポインターイベントを無効にし、離したときに再び有効にすることでした。

この問題の解決策または回避策を知っている人はいますか? ありがとう！

http://jsfiddle.net/aintnobody/0L1yumpe/

対同じコード

http://www.aintnobodymusic.com/monkey

問題: フィドルでは、すべてが正常に機能します。上記の画像はすべての場合に pointer-events: none によって無視され、クリックはその下にあるものすべてに渡されます。下の 2 つのイベント リスナーを介してこれを伝えることができます。上の 4 つは youtube の iframe 埋め込みであるため、クリックするとビデオが開始されるため、わかります (これらはライブ ビデオなので、必ず中央をクリックするか、ユーチューブに飛ばされる場合があります）。

だから、すべて順調です... サイトに載せるまで。ローカル環境とホスト環境の両方で 4 回試しましたが、常に同じ結果が得られます。下の 2 つは期待どおりに動作し、クリックは画像​​を介して下の div に移動します。ただし、iframe (youtube) は、ピクセルの 100% が上の画像で覆われている場合、クリックを登録しません。ピクセルが 1 つでも露出している場合は、正常にクリックスルーします。これが「短い」セットがある理由です。これらのビデオの上の画像は、下のビデオよりも正確に 1 ピクセル狭くなっています。

ただし、firefox では、100% カバーされているビデオはトリガーされません。これまでにテストした Chrome と Safari では正常に動作しますが、firefox では動作しません。

この問題についての言及はどこにもありません。

ここで何が起こっているのかを絞り込むために、テストごとにテストを行いました。

これはユーチューブの問題ですか？ファイアフォックスの問題？iframeの問題？iframe に origin タグがないことと関係があるのでしょうか? おそらく、ドキュメントの head と fiddle の構成に何らかの違いがありますか? 私はcodepenでも同様のことを試しましたが、問題なく動作します(クリックパススルー)...サイトに配置してfirefoxを使用するまで。

追加するために編集：codepenでも単純化されたケースを実行しただけで、クリックはそこでうまくいきますが、私がホストしたときはうまくいきません：

http://codepen.io/oompaLoompa/pen/QwqRER

そしてCSS：

スマートフォンで自分の Web サイトの CSS を 1 つ無視したいと考えています。

無視したいCSSは次のとおりです。

多分私はこれを使用する必要があります:

よくわかりません、助けてくれてありがとう！

編集 ：

tr タグ、特に「COLUMNA」という単語が含まれるスペースでホバリングをトリガーする動作を無効にしたいと考えています。

奇妙なことに、Google Chrome は基になる要素のクリックを明らかに無効にしていました。Chrome でコードを実行すると、必要な動作が正確に行われますが、Firefox では、「COLUMNA」という単語が含まれるスペースにカーソルを置くと、ホバリングが発生します。 .

Chrome ではなく FireFox で動作を表示するには、これにどのようにアプローチすればよいでしょうか?

これが私のコードです：

この画像のように、部分的に重なっている SVG 要素で mousemove イベントを検出しようとしています。

フィドル

ここで、青と赤の交差点にマウスを合わせると、これらの要素の両方でマウス イベントを検出したいと思います。青とオレンジの組み合わせについても同様です。ログでわかるように、そのような場合、イベントは現在、一番上にある青いボックスに対してのみ発生します。

青の要素の pointer-events を none に設定することで、青の要素をホバリングしている間に赤とオレンジの要素がイベントを発生させることができるため、これはポインターイベントに関係しています。しかし、その後、青いボックスのイベントを取得できないため、これも実行可能なオプションではありません。

この問題を解決するライブラリを使用します。この d3 exampleのようにイベント バブリングを見ましたが、それは DOM にネストされた要素に対してのみ機能します。他の多くの要素と重複する可能性のある独立した要素がたくさんあるため、DOM をそのように構成することはできません。

最後の手段は、現在のマウス位置にある要素を見つけて、手動でイベントを発生させることだと思います。したがって、document.elementFromPoint()を見ましたが、それは 1 つの要素しか生成しません (SVG では機能しない可能性があります?)。指定された位置にある要素を検索するjQuerypp関数が 内に見つかりました。ここを参照してください。この例は、SVG 内ではなく DIV であることを除いて、見栄えがします。div を svg の四角形要素に置き換えると、フィドルが壊れたように見えます。

私は何をしますか？！

ブラウザーがすべての UI をスケーリングできるようにするのではなく、JavaScript でピンチ ズーム ジェスチャを処理したい Web アプリケーションがあります。IE11 では、ポインター イベントを処理する要素にタッチ アクション CSS を指定する必要があることを理解しています。

私のアプリケーションでは、パンを除くすべてのタッチ動作を無効にしました (タッチ アクション: pan-x pan-y)。javascript で pointerdown、pointerup、および pointermove イベントを配線し、2 つのアクティブなポインター (ピンチ ジェスチャ) 間の距離に基づいて実行するズームのレベルを決定する独自の計算を追加しました。

デスクトップ上の IE11 では、これは期待どおりに機能します。ただし、IE のモバイル/メトロ バージョン (私は Surface Pro でテストしています) では、特定の時間に複数のポインター イベントを検出することはできません。キャプチャされた最初のイベントでポインタ キャンセルを起動するだけで、2 番目のポインタダウンの起動に失敗します。すべてのタッチ ジェスチャ (touch-action: none) を無効にすると、モバイル ブラウザーでもマルチタッチ ポインター イベントを取得できますが、パンはできなくなります。これは望ましくありません。

問題を示す簡単な jsfiddle を次に示します。

http://jsfiddle.net/wqgg0Ly7/22/

タッチ対応デバイスの IE11 のデスクトップ バージョンでこれをテストすると、これらの DIV のいずれかをつまむことができ、2 つのポインターが検出されたというアラートが表示されます。これと同じテストを IE11 モバイルで実行すると、最初の DIV のみが 2 番目のポインターを検出します。ただし、2 番目の DIV のようなパンは許可されません。

これは単なる IE Metro のバグですか、それとも要素のパンを許可しながら複数のポインター イベントをキャプチャするための回避策はありますか?

正方形の div を作成し、画面上の div でポインター ダウン イベントをトリガーしているポインターの数を知りたい。ポインター イベントには event.touches.length のようなプロパティがないため、カウンター変数を使用して div 内で指が押された回数 (つまり、ポインター ダウン イベント) を計算し、これらの条件を達成
します。 3. div 内でポインターを下に移動し (カウンタープラス 1)、div 内でポインターを
離し、カウンター マイナス 1 をします。
div、counter はまだマイナス 1 です。
4. div の外側でポインターを下に、ポインターを上にすると (外側をクリック)、counter は何もしません。

私のプログラムは次のようなものです：

通常、マウスは 1 つしか使用しないため、問題は発生していません。しかし、ポインターイベントで問題が発生しました。たとえば、左手の人差し指が div 内に触れると、ポインター ダウン イベントがトリガーされ、カウンターが 1 になりました。しかし、右手の人差し指がdivの外側で「クリック」すると、ここでポインターアップイベントがトリガーされるため、カウンターが間違った番号0を取得します（左の人差し指はまだ押されています）

カウンターに影響を与えるために、div の外で発生したクリック イベント (pointerdown と pointerup は両方とも div の外で発生します) は望ましくありません。

ポインター アップ イベントがどのポインター ダウン イベントに関連付けられているかを判断する方法がある場合は?

タッチ開始イベントとタッチ終了イベントのイベント対象が同じであるように、それらが関連していることがわかります。

前もって感謝します。

Windows 用 Safari 5.1.7 の SVG で pointer-events:none を使用しようとしても機能しないという問題が見つかりましたが、div では完全に機能します。これを使用してサポートを検出するにはどうすればよいですか。Vanilla JavaScript または Modernizr を使用して、このような独自のユース ケースにフォールバックを提供します。これは問題を示すフィドルです - http://jsfiddle.net/DLEsn/75/