マウスでクリックしたところに重なるオブジェクトidを取得したい。

Question

例えばマウスである画像上をクリックした場合、その画像に割り振られたidを取得したいです。
また、画像にonclick属性をつけずに実装したいです。
検索をかけても見つからなかったので、こちらで質問させていただきます。

関数のみで実装できる方法がありましたら教えてください。

追記
すみません
javascriptのみでお願いします。

Answer 1

こうしてください

try{
document.addEventListener ('click',function(e){myfunc(e)},true); 
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
}
/*document内のすべてのclickイベントを拾ってmyfuncに渡します*/
function myfunc(e){
  var t = (e.srcElement || e.target);//イベントからターゲット(タグ)を抽出します
  if(t.nodeName=="IMG" && e.type=="click"){//タグがIMGでイベントがclickのとき
    console.log(t.id);//ターゲットのidをコンソールに表示します
  }
}

Comments

[javascripter]

ありがとうございます。
できればソースの解説をおねがいします。

[yambejp]

解説つけときました

[think49]

細かい点ですが、いくつか改善案を。
- 「function(e){myfunc(e)}」 -> 「myfunc」(無名関数を削除)
- 「e.srcElement || e.target」 -> 「e.target || e.srcElement」(addEventListener 優先なので e.target を優先)
- 「t.nodeName」 -> 「t.tagName」(nodeNameは全てのノードに存在しうるが、tagNameがあるのは要素ノードだけ)
ところで、addEventListenerでキャプチャリングフェーズを指定しているのは何か意図があっての事でしょうか。

[javascripter]

理解できました
ありがとうございます。

最後に１つ質問なのですが、e.targetや e.type=="click"は絶対必要ではないのではと疑問に思いました。

この２つは何を意味するのでしょうか？

[javascripter]

私もtrueになっている訳を知りたいです。

[yambejp]

ご指摘いろいろありがとうございます
備忘録を見ながらいろいろ思い出してみましたがどうも覚えていません。
今思えばなんでつけちゃったんのかわかりません
以前ハマった時にキャプチャで乗り切ったことがあったような記憶があり
とりあえず怪しい時はつけとけって思考停止になっていたんだと思います。
不要なものはないほうがよいでしょう。

[yambejp]

ちなみにe.targetや e.type=="click"は、ほかのイベントを全部おなじmyfuncに
流し込んだ場合に、割り振るためにつかってます。
今回はclickだけなのであえてチェックする意味はないです

[think49]

yambejpさん、返信ありがとうございます。

> 以前ハマった時にキャプチャで乗り切ったことがあったような記憶があり
そういうこともあるのですね。

> 今回はclickだけなのであえてチェックする意味はないです
「e.target は必要」という事だけ補足しておきます。
yambejpさんにその意図はないと思いますが、文脈的に「e.targetも不要」と解釈出来なくもないので念のため。

[javascripter]

ありがとつがざいました。

Answer 2

jqeuryですが

$(function() {
    $('img').on("click", function() {
        console.log($(this).attr('id'));
    });
});