JavaScript onmouseup イベントの発火場所を aタグにしたい

前提・実現したいこと

JavaScriptでaタグをクリックしたとき（正確にはクリック開始時 = mousedown）の時に関数を実行したいのですが、aタグに"onmousedown"をつけているのにイベントがその子要素で発生してしまいます。
どのようにすればaタグでイベントを取得できるでしょうか？

発生している問題・エラーメッセージ

html
1<a href="hoge" id="hogehoge"><img src="fuga"></a>

このようなHTMLがあった時、

javascript
1const mouseDown = (ev) => {
2  console.log(ev);
3}
4let hogehoge = document.getElementById("hogehoge");
5hogehoge.onmousedown = mouseDown;
6hogehoge.onclick= () => { return false };

出力されるイベントがimgタグでのものになってしまいます

試したこと

当然といえば当然ですが、aタグの中をimgタグではなくテキストのみにすると正常にaタグでのイベントが取得できました

補足情報

Firefox (ほかに何か必要でしたら教えてください)

行動規範の内容に同意します

回答2件

ベストアンサー

event.currentTarget

event.currentTarget でa要素ノードを参照可能です。

HTML
1<a href="http://example.com/" id="hogehoge"><img src="fuga" alt="fuga"></a>
2
3<script>
4'use strcit';
5document.getElementById('hogehoge').addEventListener('click', event => {
6  console.log(event.target);
7  console.log(event.currentTarget);
8  event.preventDefault();
9}, false);
10</script>

イベントバブリング

質問文を読む限りではイベントバブリングを理解されていない様子なので、下記を熟読して下さい。

三章第三回　イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net

a要素

HTML
1<a href="hoge" id="hogehoge" onclick="false"><img src="fuga"></a>

false からデフォルト動作を止めている(リンクとして動作させていない)印象を受けますが、それがリンクでないのなら、<a> でマークアップすべきではありません。
見た目はCSSで調整して下さい。

Re: kakudo415 さん

投稿2018/08/12 01:25

think49

総合スコア18162

kakudo415

2018/08/12 03:24

currentTargetを使えばよかったんですね！これが私の求めていたものです。 JSはイベントが伝わっていくことは何となく聞いたことがありましたが、良い記事を教えていただきました。ベストアンサーにさせていただきます、ありがとうございました。補足：なぜ<button>ではなく<a>かというと、JSを動かさない天邪鬼な環境でaタグとして動作させるためです（修正しましたが、<a>タグに直接falseを指定するのは間違いでした。すみませんでした。）

think49

2018/08/12 03:42 編集

> 補足：なぜ<button>ではなく<a>かというと、JSを動かさない天邪鬼な環境でaタグとして動作させるためです（修正しましたが、<a>タグに直接falseを指定するのは間違いでした。すみませんでした。）修正後のコードを読むと、JS有効環境でキーボード操作でリンクを押下した時に何も発生しない問題があります。マウス操作だけに特化した機能とするなら、mousedownイベントハンドラで event.preventDefault() して下さい。

kakudo415

2018/08/13 16:31

確かにキーボード環境を考慮していませんでした！ preventDefaultにはそういう意図があったのですね！ありがとうございます！！

行動規範の内容に同意します

こんにちは。
以下のスタイル追加でいかがでしょう？

CSS
1a { display: table-cell; }
2img { pointer-events: none; }

上記のサンプルを、https://jsfiddle.net/jun68ykt/vbm4hx9d/48/ に上げておきました。

また、 FireFox v61 にて、以下のHTMLで確認しましたが、意図通り <a> が mousedown を取得できていました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>q140794</title>
6    <style type="text/css">
7        a { display: table-cell; }
8        img { pointer-events: none; }
9    </style>
10    <script>
11      const mouseDown = (ev) => {
12        console.log(`type:${ev.type}, tagName: ${ev.target.tagName}, id: ${ev.target.id}`);
13      };
14
15      document.addEventListener("DOMContentLoaded", function(event) {
16        let hogehoge = document.getElementById("hogehoge");
17        hogehoge.addEventListener('mousedown', mouseDown);
18      });
19    </script>
20</head>
21<body>
22    <a href="hoge" id="hogehoge" onclick="return false;">
23        <img src="https://dummyimage.com/100x100/1c08fc/fff.png&text=fuga">
24    </a>
25</body>
26</html>