こんにちは、さるまりんです。
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>だったときに、「あれ？ひとつずつごりごりと親を探さないといけない？」と思いましたが、こんな便利な機能があったんですね。
読んでくださってありがとうございました。
それではまた！