イベントの委任を伴う不規則な形のオブジェクトのマウスイベントの処理

Question

複数の不規則な形のオブジェクト（例えば、住宅）が互いに重ね合わされているページでマウスイベントを処理する必要があります。 jQuery .on（）の通常の方法を使用すると、オブジェクト（またはイメージ）の透明部分をクリックした場合でも、報告されるイベントソースは常に一番上のオブジェクトになります。

例：Xの位置をクリックしても、赤い三角形を含むタグは常にイベントソースになります。

マウスクリックが三角形の内側にないことを検出できます。私が必要とするのは、イベントを下の緑色の三角形に「転送」する方法です。

EDIT：私の現在のアプローチは、すべてをラップする大きなdivのイベントをキャッチし、jQueryセレクタを使用して座標を比較してどのオブジェクトがマウスの下にあるかを調べ、マウスが透明部分か否か。それはうまく動作しますが、ゆっくりであり、特にマウス移動イベントが連続して発生していると、がたくさんのを消費しているようです。

編集2： この画像はBuilding a game engine with jQueryから抽出され、私のアプローチはそれとほぼ同じです。そして今、これは質問です：

Answer 1

プレーンなHTML要素を使用して複雑なグラフィックを描いていますか？正確なニーズはわかりませんが、SVGやキャンバスを使用する方が理にかなっています。シェイプのクリックイベントを捕捉する方がずっと簡単です。