ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose の pointer-events 属性のおかしな動作について
css_html/css_WEB-ITnose の pointer-events 属性のおかしな動作について
- WBOYオリジナル
- 2016-06-24 11:50:241823ブラウズ
私の記憶では、pointer-events はイベントの透過に使用されます。つまり、pointer-events:none が親要素に設定されている場合、親要素は mouse events イベントをリッスンしなくなります (をタッチし、このようにクリックします)。
これを行う必要がある状況は、通常、親レイヤーを「貫通」したい場合で、子要素を直接クリックすると、親要素は何も起こらなかったかのように動作します。これは私のこれまでの知識から収集した情報です。今のところ間違ってはいないようですが、まだ不完全です。
それには副作用があります。つまり、上記の知識の適用には条件が付いています。これは確かに、この (pointer-events:none) 属性を親子関係にある要素に適用した場合の動作ですが、並列レイヤーの 2 つのブロック要素に適用した場合も同様に動作しますか?
この問題は、上のスクリーンショットに示されているアプリケーションが原因で発生します。後で簡単なプロトタイプを提示します。まず、このシーンデモの問題点を簡単に紹介します。上の図には実際には 4 つのレイヤーがあります:
ページ コンテナーとしてのページ レイヤーと、ページの下にある花と植物で構成されるサブレイヤーは、後続のデモンストレーションの便宜上、pagesub レイヤーと呼ばれます。
もう 1 つのレイヤーは、ページを左右にめくるために使用されるボタン レイヤーです。このレイヤーはページ レイヤーと平行であり、ページ上で浮いているように見えるため、フロート レイヤーと呼ばれます。 float レイヤーの下には、floatsub というレイヤーがあり、小さなキノコのボタンをラップするために使用されます。
小さなキノコをクリックしても、フロート層のイベントがトリガーされないことを願っているので、フロート層に pointer-events:none を追加しました。その後、問題が発生します。応答はありません。モニタリングの結果、クリックされたのはページ内の花と植物のレイヤーであることが判明しました。私は妹がいなくて寂しくて仕方がありませんでした。激しい追求の末、ついに真実の愛を見つけました。以下に姉妹を求める紆余曲折の過程を発表します:
pagesubはpageの子要素、floatpageはfloatの子要素で、それらの位置関係は上図の通りです。緑色のページはページ レイヤー、青色の pagesub は花と草のレイヤーです。赤いフロートはボタンレイヤーです
灰色のフロートページはキノコレイヤーです。 (色盲の友達はテキストを読むだけで大丈夫です)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { text-align: center; } .page { position: absolute; top : 0; left:0; height: 400px; background-color: green; width:500px; z-index: 2; } .float { width: 400px; height: 200px; position: absolute; top:50px; left: 50px; z-index: 3; pointer-events:none; background-color: red; } .pagesub { width: 90%; height: 60%; position: absolute; top:30px; left: 10px; z-index: 4; background-color: blue; color:white; } .floatsub { width:80%; height: 60%; position: absolute; top:33px; left:44px; background-color: gray; z-index: 4; color: white; } </style></head><body><div class="page">page <div class="pagesub"> pagesub </div></div><div class="float">float <div class="floatsub"> float page </div></div></body></html> 上記のソースコードに従って、Chrome で調整して、フロート ページ (グレー) レイヤー上の要素を表示すると、実際にはページサブレイヤーは青色で表示されます。それは完全に不合理です。画像と真実があります:
しかし、属性 pointer-events を削除しようとすると、奇跡が起こり、すべてが期待どおりに戻りました。どうしてこれなの？ポインタ イベントは、絶対に配置されたレイヤーと関係に影響を与えることを説明してください。もちろん親子関係ではなく並列関係が前提です。並列関係にある要素でポインター イベントを使用すると、後続の要素が無視されます。
ここで「絶対に配置されたレイヤーと関係」に注意してください。それは、pointer-events:none 属性を使用しているように見える要素が無駄な要素の背後にあることを意味します。これが起こったことを確認することはできませんが、テスト結果はこれが事実であることを示しています。
none に加えて、ポインター イベントの他の属性についても触れておきます:;
さて、今回の共有はこれで終わりです。投稿するのは大変な作業ですが、お金がある人は感謝するでしょうし、それが好きな人はきっと喜ぶでしょう。個人的には感謝しています、皆さんありがとうございます！