css_html/css_WEB-ITnose の pointer-events 属性のおかしな動作について
私の記憶では、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 に加えて、ポインター イベントの他の属性についても触れておきます:;
さて、今回の共有はこれで終わりです。投稿するのは大変な作業ですが、お金がある人は感謝するでしょうし、それが好きな人はきっと喜ぶでしょう。個人的には感謝しています、皆さんありがとうございます！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7552
15
1382
52
83
11
22
91
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
