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 の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

MySQL外部キーの3つの関係例の詳細な説明

この記事では、例を使用して、MySQL 外部キーの 3 つの関係について説明します。ご参考までに、詳...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

Linux 環境に MySQL 8.0 をインストールするプロセスの紹介

目次序文1. Linux は yum ソースを変更します (MYSQL のインストールが遅い場合は試...

MySQL 接続で認証失敗エラーが発生する場合の分析と解決方法

[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

VMware 仮想マシン (CentOS7 イメージ) を使用して Linux をインストールする

1. VMwareのダウンロードとインストールリンク: https://www.jb51.net/s...

JSONデータをHTMLで表示する方法

背景:場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...

MySQL におけるデフォルトの使用法の詳細な説明

NULL および NOT NULL 修飾子、DEFAULT 修飾子、AUTO_INCREMENT 修...

MySQL 8.0.15 のダウンロードとインストールの詳細なチュートリアルは初心者にとって必須です。

この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...

よくある MySQL 設計エラーをご存知ですか?

インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...

Hタグはウェブページ制作において適切に使用すべきである

HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...

指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアド プロシージャの設定やテーブルの追加は不要)

mysql は期間内のすべての日付または月を取得します1: mysqlは期間内のすべての月を取得し...

Linux システム ディレクトリ sys、tmp、usr、var の詳細な説明。

Linux 初心者から Linux マスターへの成長の道: Linux システム ディレクトリ s...