JavaScriptのclickイベントからそれを囲むaタグのhref属性を取る方法

2024/9/23 JavaScript

こんにちは、さるまりんです。

JavaScriptでクリックしたところのリンク先を取りたい事があります。ただ、そのクリックしたところが<a>タグであるとは限らないです。画像をクリックするとクリックイベントはその<img>タグで発生しますし、エリアをクリックすると<span>だったり<div>だったりの場合もあります。
なので、リンク先を取得したい場合、そのクリックイベントが発生したところを囲む<a>タグのhref属性を取得する必要があります。

どうするか？

クリックされた要素からその親要素の<a>タグまでたどっていき、そのhref属性を取得します。

以下その例です。

こんなHTMLがあります。
<a>タグの内側に<span>でテキストの要素があります。

<a href="/to-somewhere" id="a-link">
  <span>リンクのテキスト</span>
</a>

次のようなJavaScriptで<a>タグのhref属性を取得できます。

document.addEventListener('click', function(event) {
  // クリックされた要素を取得
  let target = event.target;
      
  // クリックされた要素が<a>タグか、もしくはその子要素か確認
  let aTag = target.closest('a');
      
  if (aTag) {
    // <a>タグのhref属性を取得
    let href = aTag.getAttribute('href');
    console.log('リンク先:', href);
  }
});

コメントにもありますが簡単にコードの流れは次のようなものです。

event.targetでクリックされた要素を取得します。
closest('a')でクリックされた要素が含まれるもっとも近い<a>タグを探し
<a>タグが取得できていたら、そのhref属性をgetAttribute('href')で取得

closest('a')は<a>タグがクリックされた場合でも<span>タグがクリックされた場合でも正しく<a>タグを取得してくれます。

クリックして取れたのが<span>だったときに、「あれ？ひとつずつごりごりと親を探さないといけない？」と思いましたが、こんな便利な機能があったんですね。

読んでくださってありがとうございました。

それではまた！