問題タブ [pointer-events]

Polymer-ui-cardを JS から Dartに移植 しています。

違いは、私たちのプロジェクトには (慣例により) アプリケーション全体を含む追加の Polymer 要素 (app-element) があることです。

JavaScriptでは次のようになります

Dartポートは次のようになります

app-elementには、body タグが JS に持つコンテンツがあります

Polymer-ui-card (JS と Dart で同じ)

ここでの問題は、すべてのポインタ イベントのターゲットが要素では<app-element>なく であることです。<polymer-ui-card>

これは設計によるものですか、それとも Dart だけの問題ですか、それとも何か間違っていますか?

私がやろうとしているの.topは、固定されたブロック（それを呼び出しましょう）と別のブロック（これを呼び出しましょう）.contentを持って.topいること.topです。

今、いくつかの明白な設定があります

これ http://jsbin.com/rucifuzu/1/edit?html,css,output

またはこれ http://jsbin.com/hufomaxu/1/edit?html,css,output

両方の問題は、a) スクロールバーの幅を考慮する必要があることです。b) スクロール/スワイプしても、その下に.topある要素では何もしません。overflow: auto

私はいくつかの解決策について考えました。

最初はpointer-events: noneon.topになり、マウスイベントに対して「透明」になり、その下にあるものすべてでスクロールがトリガーされます。問題は、クリックイベントも機能しないことです.top。それは問題だ。クリック/選択可能なものだけにリセットすることもできpointer-eventsますが、それらのクリック可能なものの1つが大きなお尻の見出しになることを考えると、マウスの位置でスクロールが機能しないという問題が再び発生します。auto

overflow: auto2 つ目は、私がスクロール委譲と呼んでいるもので、JS を使用してマウスホイール イベントをキャッチし、要素の scrollTop を変更しました。これは正常に機能しますが、この委譲が行われている間と、ネイティブ スクロールの開始時にスクロールの「感触」が異なる可能性があり.contentます。また、タッチ デバイスでこの動作を正しく行うのも面倒です。

したがって、どちらも理想的ではありません。この問題に対する巧妙で簡単な解決策を見逃していませんか?

TL;DR 目標は、.top要素をクリック可能で「スクロールスルー可能」にすることです

1. この方法.topはクリック可能ですが、その下の要素はスクロールしません- http://jsbin.com/hufomaxu/1/edit?output
2. このようにその下の要素はスクロールしますが、.top クリックできません- http://jsbin.com/tuluwili/1/edit?output

pointer-events: none; で外側の div を持つことが可能です。そしてその中に別の div があり、pointer-events: auto; があります。外側の div はクリック イベントに対して透過的になり (つまり、クリック イベントには反応しませんが、基になる html コントロールは反応します)、内側の div は透過的になります。

ただし、iframe で同じことを行う必要があるシナリオがありますが、機能していません。pointer-events: none; を設定しました。iframe では、しかし、クリック可能にする必要がある内部 div は、それらにポインターイベントがあってもありません: auto; 設定。

ここに別の同様の質問がありますが、トピックから外れているため閉じられています。理由がわかりません。これは非常に有効な html/css の質問です。

同じ中心を中心に回転できるように、互いに 4 つの div を作成しました (絶対配置)。問題は、各 div 内にリンクがあり、その結果、もう機能していない (クリックできない) ことです。「pointer-events: none;」を使用して、Firefoxでそれらを機能させることができました。div と "pointer-events: auto;" について リンクで。残念ながら、これは Firefox でのみ機能します。だから、誰かがSafariとChrome（そしておそらくIE）でもリンクを可能にする別の解決策（おそらくJavaScriptなし）を持っているかどうか知りたい.

HTML:

CSS:

jsFiddle は次のとおりです: http://jsfiddle.net/jf6A5/。

よろしくお願いいたします。

css を使用してホバー時に不透明度を変更するインタラクティブな背景があります。この上 (絶対配置) にはテキスト レイヤーがあります。上部のテキストでも背景が反応できるようにするために、テキストを含む div にcss pointer-event:noneを追加しました。

これはうまく機能しますが、テキストを強調表示する機能を維持できればさらに良いでしょう。

どのポインターイベントが抑制されるかを制限する方法を知っている人はいますか?

以下のコードは、私がやろうとしていることの非常に単純なバージョンです。要素が押されている間にループ機能をトリガーしようとしています。これはタッチスクリーンで使用するためのものなので、本番環境では実際にhammer.jsを使用してタッチリスナーを統合しています。この奇妙な現象は IE 11 で発生します。実際のポインター イベントは、コンテキスト メニューの「円」 (ブラウザ上で指を押し下げていることを示す小さなブラウザ アニメーション) がコンテキスト メニューを開く試行を完了するまで発生しません。

押してすぐ離すと、pointerdown イベントと pointerup イベントの両方が 1 つのループとともに連続して発生します。

これは IE 11 でのみ発生し、chrome は期待どおりに動作します。これは、マウス イベント (およびマウスではなく指が画面に触れている) でも発生し、hammer.js のタッチおよびリリース イベントでも発生します。

驚くことではありませんが、押したまま「指」を動かすと、スクリプトは期待どおりに動作し、コンテキスト メニューの「円」は開こうとしません。

これは Windows 7 でのみ発生することを明確にしておく必要があります。Windows 8 は予想どおりに動作します。同じバージョンの IE 11.0.9600。私も e.stopPropagation() を試し、要素と本体の両方でマウスムーブをトリガーしようとしました。これにより、ブラウザが指が動いたと偽る可能性があります。

これは特殊なケースのように思えますが、残念ながら、この特定の OS/ブラウザーの組み合わせでプロジェクトを機能させる必要があり、行き詰まっています。