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);
  }
});

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