Override default behaviour for link ('a') objects in Javascript

user_91458 0
Viewed 41517

I don't know if what I'm trying to accomplish is possible at all. I would like to override the default behaviour for all the anchor objects (A tag) for a given HTML page. I know I can loop through all the A elements and dynamically add an onclick call to each one of them from the body element onload method, but I'm looking for a more absolute solution. What I need is that all A elements get assigned an onclick action which calls a method that passes the element href property as an argument, so the following:

<a href="http://domain.tld/page.html">

Dynamically becomes:

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;">

Like I said, the ideal way to do this would be to somehow override the Anchor class altogether when the document loads. If it's not possible then I'll resort to the loop-through-all A elements method (which I already know how to do).

anchor overriding dom javascript
5 Answers

Similar to Benji XVI's answer, but using querySelectorAll, within for instance a container div with class 'container' And using es6.

const $elems = document.querySelectorAll('.container a')
var elems = Array.from($elems)
elems.map(a => {
  a.onclick = (e) => {
    e.preventDefault()
    window.alert('Clicking external links is disabled')
  }
})
user_37097750
Related