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 をよろしくお願いいたします。