如何将对角线div分为4个可点击的部分？

如果要根据位置采用单个div /不同逻辑，则可能会有所帮助。

我只是在此页面的控制台中编写了此代码：

document.body.addEventListener("click",(e)=>console.log(e))

并点击，在这个顺序，在这些部分："yellow"，"red"，"blue"，"green"你的形象。（我ctrl在单击时按住不放，这样它就可以在新标签页中打开图片，并且此页面可以保留）

产生的事件（4 loggeed，ofc）具有一个path属性，该属性表示我单击了哪个元素（在本例中，主体是img），以及相对于此元素的offsetX＆offsetY

关系是：

{
  "yellow": {offsetX: 18, offsetY: 59},
  "red": {offsetX: 59, offsetY: 25},
  "blue": {offsetX: 85, offsetY 46},
  "green": {offsetX: 61, offsetY: 78},
}

是的，您可以在MouseEvent中使用：

• 偏移量

  MouseEvent接口的offsetX只读属性提供该事件与目标节点的填充边缘之间鼠标指针X坐标的偏移量。

• 偏移量

  MouseEvent接口的offsetY只读属性提供该事件与目标节点的填充边缘之间鼠标指针的Y坐标中的偏移量。

并确定用户单击的位置。