0

属性を持つIMG( idless) 要素があるとしusemap="#hotmap"ます。次に、膨大な量のs (たとえば >1000)を含むこの<MAP name="hotmap">要素 ( 内) があります。何百ものイベントリスナーを作成する代わりに、 sのイベント処理を要素に委譲したいことは明らかです。BODYAREAAREAMAP

ここで、イベント ハンドラ関数 ( for ) で、イベントを発生させたを使用するMAPへの参照を取得したいと考えています。ただし、and要素は HTML を持つことができないため、その子の中に含めることはできません。問題は、このイベント ハンドラで をキャッチするにはどうすればよいかということです。IMGMAPMAPBODYIMGMAPIMG

些細な例:

<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 プロジェクトに取り組んでいます。このオブジェクトはAREAs のデータを外部ファイルから取得し、この 1 つの詳細を除いてすべて正常に動作しています。今のところ、「user」への参照を含むカスタム プロパティをIMGeach に追加していAREAます。これは、イベント ハンドラで 1 回だけ実行できれば不要ですが。

編集

jsFiddleでのライブ デモ(HTA は含まれていません。どの (?) 最新のブラウザーでも動作します)

編集Ⅱ

MAPに従ってサイズを変更することもできるため、 を再利用できないことに気付きましたIMG。そのため、s の代わりにIMGへの参照を入れました。MAPAREA

これで問題は解決しましたが、一般的に、イベントハンドラで を取得する方法を知りたいIMGです。提案されたquerySelector()解決策はうまくいかないようです（以前にタンブルされましたが、今は戻りますundefined）

4

1 に答える 1

1

最初に:
そこで使用するメソッドに注意してください。HTA は既定で IE7 (標準モード コンテンツ) または IE5 (互換モード コンテンツ) で実行されるため、IE で利用可能な機能に依存することはできません。IE5 で利用可能なメソッドのみを使用することをお勧めしattachEventますaddEventListener。

この記事に従って 、互換性を定義できるはずですが、私にとっては機能しません。

質問に関連：

マップのクリック イベントを観察する代わりに、画像のクリックを観察します。
マップ上のクリックを観察すると、マップが複数の画像で使用されている場合、マップと画像の間の関係を見つける方法がありません。

于 2012-11-16T19:04:21.577 に答える