aタグの遷移を無効化する

ツイート
2021年08月26日
2021年08月26日

ドキュメント

Event.preventDefault() - Web APIs | MDN

ポイント

  • Event.preventDefault()を使用して、遷移を無効化します
    • EventのDefaultの動作をprevent(妨げる)

実装

特定のIDを持つ1つのaタグの遷移を無効化する

  • getElementById を使用します
js
const preventExternalLink = () => { const externalLink = document.getElementById('external-link') // ID取得 externalLink.addEventListener('click', (e) => { // イベント追加 e.preventDefault() // 無効化 console.log(e.target.href) // href属性の取得 }) }

特定のIDを持つ全てのaタグの遷移を無効化する

  • querySelectorAll を使用します
js
const preventExternalLinks = () => { const externalLinks = document.querySelectorAll('#external-link') externalLinks.forEach(externalLink => { externalLink.addEventListener('click', (e) => { e.preventDefault() console.log('href: ', e.target.href) }) }) }