css_html/css_WEB-ITnose の pointer-events 属性のおかしな動作について-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css_html/css_WEB-ITnose の pointer-events 属性のおかしな動作について

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

私の記憶では、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 に加えて、ポインターイベントの他の属性についても触れておきます:;

auto-----デフォルト値、マウスは現在のレイヤーを通過しません

SVG の場合:visiblePainted*、visibleFill * 、visibleStroke*、visible*、Painted*、fill*、stroke*、all*

さて、今回の共有はこれで終わりです。投稿するのは大変な作業ですが、お金がある人は感謝するでしょうし、それが好きな人はきっと喜ぶでしょう。個人的には感謝しています、皆さんありがとうございます！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、