如何從MAP的eventhandler函數中獲取對IMG元素的引用？

假設我們有一個IMG（id更少）元素，它具有usemap="#hotmap"屬性。然後，我們有這個<MAP name="hotmap">元素（在BODY中）包含大量的AREA（比如> 1000）。很明顯，我們希望將事件處理AREA s委託給MAP元素，而不是創建數百個事件監聽器。如何從MAP的eventhandler函數中獲取對IMG元素的引用？

現在在事件處理函數中（對於MAP），我們想要參考IMG，它使用MAP來觸發事件。但MAP是BODY和IMG元素不能有HTML，因此MAP不能在它的子元素之中。所以問題是，我們怎麼能在這個事件處理程序中捕捉到IMG？

一個簡單的例子：

<img src="some_image.png" usemap="#hotmap" /> 
       ... 
<map id="map" name="hotmap"> 
    <area shape="circle" coords="100,100,50" /> 
       ... 
</map> 

map.addEventListener('click', function (e) { 
    var area = e.target, 
     image = ?; // How to refer the img 
     ... 
}, false);

旁註

我工作的一個HTA項目，我需要動態地創建並具有一定的圖像分配hotmaps對象自定義屬性。該對象從外部文件中獲取AREA的數據，並且一切工作正常，除了這一點細節外。現在，我將添加一個自定義屬性，其中包含對「用戶」IMG的引用，對每個AREA都有引用。儘管這是不必要的，但如果它只能在事件處理程序中完成一次。

編輯

現場演示在jsFiddle，（包括不HTA，在任何（？）現代瀏覽器的工作原理）

編輯II

我才意識到，我不能重複使用MAP，因爲它也可以根據IMG調整大小。所以我把IMG的參考號碼改爲MAP而不是AREA。

雖然這解決了我的問題，我還是想知道，如何讓IMG在事件處理程序，只是一般。建議querySelector()解決方案似乎不工作（與它較早的下跌，現在它返回undefined）

來源

2012-11-16 Teemu

可以請你發佈完整的標記方含圖像和地圖開始標籤。 –

@ Dr.Molle它過於龐大，張貼在這裏，但我工作的一個的jsfiddle剛纔。這需要一段時間，因爲我必須將HTA文件操作的結果轉換爲數組才能在常規HTML頁面中工作。 – Teemu

編輯後我不再需要它了，對不起。當您使用具有多個圖像的地圖時，標記不相關。 –

起初：
小心你用那裏的方法，HTA默認運行與IE7（標準模式的內容）或IE5（怪癖模式內容），所以你不能依靠你的IE中可用的功能。我建議只使用IE5中可用的方法，例如使用attachEvent而不是addEventListener。

繼this article，你應該能夠確定的相容性，但對我來說這是行不通的。

相關的問題：

觀察地圖上的點擊事件相反的，觀察的IMG點擊。
當你觀察在地圖上點擊，並且地圖所使用的多張圖片，有沒有辦法找到地圖和圖像之間的關係。

來源

2012-11-16 19:04:21

起初：不用擔心，這是一個獨立的桌面應用程序，需要安裝IE9。當IE9可用時，一切都經過測試和運作。與此問題相關：我嘗試了這一點，但後來我無法得到實際被點擊的'AREA'。這很奇怪，因爲如果有例如'DIV'點擊，他們可以在事件處理中追蹤。無論如何，謝謝你的回覆。如果沒有人不能證明這個「否定」答案不正確，我會在幾天內接受它。 – Teemu

當IE9可用並且一切正常時，爲什麼在使用querySelectorAll時HTA會引發錯誤？我也安裝了IE9，並且querySelectorAll和addEventListener在HTA中不可用。 –

嗯......很難說沒有看到代碼，而是一個文明的quess是，你要麼''

如何從MAP的eventhandler函數中獲取對IMG元素的引用？

回答