html - 互いにカバーする複数のHTML要素でマウスクリックイベントをトリガーする方法は?

Question

相互にカバーする任意の数の HTML 要素で複数のマウスクリック イベントをトリガーする方法は?

pointer-events: none;クリックが要素を通過できるようにするために使用できることはわかっていますが、要素でマウスクリック イベントをトリガーし、その下にある他の多くの要素でマウスクリックイベントをトリガーしたい場合はどうすればよいでしょうか?

Answer 1

しかし、ある要素でマウス クリック イベントをトリガーし、その下にある他の多くの要素でマウス クリック イベントをトリガーしたい場合はどうすればよいでしょうか。

イベントバブル。つまり、内側の要素で発生したイベントは、最上位の親まで親要素によっても受信されます。

<div id="topmost">
    <div id="second">
        <p id="firstp"></p>
    </div>
</div>

jquery を使用しているとします。以下は、div.id="topmost" の下のすべての要素からのクリック イベントをリッスンする方法です。

イベントの通常のフローは、最上位の div 要素内の任意の要素によって発生する任意のクリック イベント (他のタイプのイベントである可能性があります) のためのものであるため、最外部の要素にバブリングされます。ターゲット要素の ID をチェックして、どの要素がそのイベントを発生させたか。e.target は、クリックが実行された実際の要素になります。target.attr('id') を切り替えるか、if else 条件を実行することができます。

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if(target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});