當onclick事件位於前景圖像上時，如何獲得背景圖像的偏移座標？

Question

我有一個圖像 - 這是一個接線圖 - 我可以點擊並讀取offsetX和offsetY座標。那沒問題。在該圖像上，通過使用矩形形式的另一圖像來選擇特定的局部區域。換句話說，矩形突出顯示了接線圖的特定部分。 Ergo，我在另一幅圖像上疊加了一幅圖像。

當用戶在矩形內部單擊時，事件對象顯示相對於矩形圖像的offsetX和offsetY位置，而不是接線圖。同樣，當用戶點擊沒有矩形圖像的地方時，我沒有問題讀取適當的偏移座標。

我想要檢索接線圖的偏移座標，當用戶單擊矩形上或矩形內的任何位置時，就好像矩形圖像不存在一樣。

例如，用戶點擊一個組件，偏移XY座標是45和100.現在，用戶選擇這個組件並點擊與第一次完全相同的點。再次讀取偏移XY座標。但是，不是讀取45和100，而是讀取值爲10和12.我希望如果用戶點擊矩形，它的偏移座標將會讀取45和100，而不是10和12.j

任何幫助，將不勝感激。

下面是HTML

<div id="leftpane"> 
    <div id="wiring_diagram_div" style="height: 800px; position: relative;"> 
     <img id="wiring_diagram_page1" use="#MAP_JK1" src="wiring_diagram_page1.gif" onclick="zoomOnImage(event, 1);" /> 
     <map id="MAP_JK1" name="MAP_JK1"> 

     <!-- There are many more area tags. This is just an example --> 
      <area shape="rect" coords="435, 550, 443, 563" onclick="javascript:selectComponent();" /> 
     </map> 

     <!-- There are 3 rectangles but only one is enabled at a time. A rectangle is enabled based upon the user selecting a component and the particular rectangle displayed is dependent on the size of the component selected by the user. --> 
     <div id="rectangle1" name="rectangles"> 
      <img id="rectangle1_1" name="rectangle" src="rectangle.gif" onclick="zoomOnComponent(event);" width="15" height="18" style="display: block;" /> 
      <img id="rectangle2_1" name="rectangle" src="rectangle.gif" onclick="zoomOnComponent(event);" width="22" height="19" style="display:none;" /> 
      <img id="rectangle3_1" name="rectangle" src="rectangle.gif" onclick="zoomOnComponent(event);" width="28" height="21" style="display:none;" /> 
     </div> 
    </div> 
</div> 

Answer 1

基本上你需要得到被點擊的疊加矩形的偏移，並添加click事件的偏移XY這些值的相關部分。合理？