使用事件委托处理不规则形状对象上的鼠标事件

Question

我需要在页面上处理鼠标事件，其中有多个不规则形状的对象（例如，房屋）堆叠在一起。如果我使用事件委托jQuery .on（）的常规方式，报告的事件源将始终是最顶层的对象，即使用户单击对象（或图像）的透明部分。

示例：即使单击X位置，包含红色三角形的标记也始终是事件源。

我可以检测到鼠标点击不在三角形内部。我需要的是一种将事件“转发”到下面的绿色三角形的方法。

编辑：我当前的方法是捕获包含所有内容的大div上的事件，然后使用jQuery选择器并比较坐标以找出鼠标下的哪个对象，然后检查鼠标是否是透明的部分。它工作正常，但似乎很慢并消耗很多的内存，尤其是连续触发鼠标移动事件。

编辑2： 此图片是从Building a game engine with jQuery中提取的，我的方法几乎与此相同。而现在，这是一个问题：

Answer 1

您是否使用纯HTML元素绘制复杂图形？不确定您的确切需求，但使用SVG或Canvas可能更有意义，因为在形状上捕获点击事件变得更加容易。