CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。

ここに画像の説明を挿入

この要件を見たとき、私は少し混乱しました。現状では、日付コンテンツボックスの空白領域がクリックされたときのみ、クリックイベントに反応してドロップダウン日付メニューが表示されます。

ここに画像の説明を挿入

このアイコンは日付コンテンツ ボックスに必ず配置します。レイヤー サイズは日付コンテンツ ボックスよりも大きいため、クリックしてもクリック イベントに反応しません。私の最初の反応はイベントクリックの浸透でしたが、それをどのように達成するのでしょうか?今まで無視していた知識の盲点に触れたような気がします。

私はとても混乱していたので、虎のように行動し、Google でプログラミングを始めました...

事実は、科学的にインターネットを閲覧することが重要であることを証明しています。Google は Baidu よりも正確です。私はまた Baidu の広告について不満を言っています…

アイコンで覆われたコンテンツ ボックス領域もクリック イベントに応答できるようにするには、 poniter-events cssプロパティを使用します。

poniter-events属性には多くの値がありますが、そのほとんどは svg に関連するものであり、直接スキップできます。一般的な属性値はnone | auto 2 つです。

auto : これはpointer-events属性が指定されていない場合と同じように動作します。 none : 要素はマウス イベントのtargetにはなりません。ただし、子孫要素のpointer-eventsプロパティに別の値が指定されている場合は、マウス イベントを子孫要素に送信できます。その場合、マウス イベントはキャプチャ段階またはバブリング段階で親要素のイベント リスナーをトリガーします。

poniter-eventsの互換性を見てみましょう:

デスクトップブラウザ

IE : 11+ (IE6~IE10 はサポートされていません) Firefox : 3.6+ Chrome : 4.0+ Safari : 6.0 Opera : 15.0

モバイルデバイスブラウザ

iOS Safari : 6.0 Android Browser : 2.1以上Android Chrome : 18.0以上

これを見ると、今回私が遭遇した問題を基本的に解決できます。

ここに画像の説明を挿入

問題を解決した後、新たな疑問が生じます。マウス クリックが外側のマスクを貫通できるようにする以外に、 poniter-events一般的なアプリケーション シナリオは他にありますか?

none値の効果を考慮すると、イベントのクリック動作をキャンセルできるはずです。たとえば、a ラベル リンクをクリックできないようにし、ボタンの複数回のクリックやフォームの繰り返し送信などを避けます。さらに、属性値を通じて発見できるアプリケーションは他にもたくさんあります。

要約する

CSS 属性を使用してマウス イベントをブロックする (マウス クリックは上位の要素を貫通する可能性があります) 方法に関するこの記事はこれで終わりです。マウス イベントをブロックするためのより関連性の高い CSS 属性については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL シリーズ: MySQL リレーショナル データベースの基本概念

>>:  HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

推薦する

Dockerでホストファイルをカスタマイズする方法について簡単に説明します

目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

HTML で js を使用してローカル システム時間を取得する

コードをコピーコードは次のとおりです。 <div id="名前"> ...

HTML でシンプルな ListViews 効果を実装するためのサンプル コード

シンプルなリストビュー効果を実現するHTML結果: CSS スタイル ファイル listviewTe...

Dockerを使用して分散lnmpイメージを作成する

目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...

Linuxシステムにおけるプロセス管理の詳細な説明

目次1. プロセスとスレッドの概念2. プロセス管理とは何ですか? 3. プロセス管理の役割4. L...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御

目次1. バックグラウンドで実行されるジョブ2. 信号を使用してプロセスを制御する基本的なプロセス管...

Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...

MySQL 最適化: キャッシュ最適化 (続き)

MySQL 内部には至るところにキャッシュがあります。MySQL のソースコードを読むと、キャッシ...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...

js は axios 制限リクエスト キューを実装します

目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...