Run javascript when anchor is clicked in the footer tag?-CodePudding

Here's my footer html:

<footer>
    <div>
         <a href='a.aspx'>test 1</a>
         <a href='b.aspx'>test 2</a>
    </div>
    <a href='c.aspx'>test 3</a>
<footer>

Is there a way to always run a javascript function whenever a link is clicked within <footer> before it redirects? And is it possible to also find where it will redirect to within the function?

CodePudding user response：

Sure. .querySelectorAll is perfect selector for this.

var footerAnchors = document.querySelectorAll("footer a");

footerAnchors.forEach(anchor => addClickListener(anchor));

function addClickListener(anchor){
  anchor.addEventListener('click', (event) => {
    alert(event.target.href);
    event.preventDefault()
  })
}

<footer>
    <div>
         <a href='a.aspx'>test 1</a>
         <a href='b.aspx'>test 2</a>
    </div>
    <a href='c.aspx'>test 3</a>
<footer>

CodePudding user response：

you can use querySelectorAll and forEach for this:

document.querySelectorAll("footer a").forEach(function(elem) {
  elem.addEventListener("click", function(event) {
    event.preventDefault() //use this to stop the default redirect if you want to do that manually
    const linkTarget = event.target.href
    console.log(linkTarget) //use this however you like

    if (linkTarget.includes("a.aspx"))
      document.location = linkTarget //for example redirecting if it contains a.aspx
  });
});

<footer>
    <div>
         <a href='a.aspx'>test 1</a>
         <a href='b.aspx'>test 2</a>
    </div>
    <a href='c.aspx'>test 3</a>
<footer>

however, if you want to execute a function every time the site is left, not only by clicking a link, but also by clicking back in the browser for example, i suggest you use window.onbeforeunload for this, instead of event handlers in the footer: docs

CodePudding user response：

You don't need to attach listeners to every anchor element.

Using event delegation you can attach a single event listener to the footer element, and in the callback function check whether or not the clicked element was an anchor — then execute code related to each specific case.

Element.matches() can be used to check if the element that was clicked was an anchor, and then Event.preventDefault() can be used to prevent the default navigation behavior for the clicked anchor.

Here's a complete example:

const footer = document.querySelector('footer');

function handleFooterClick (ev) {
  console.clear();

  // The click event was dispatched from an anchor element:
  if (ev.target.matches('a')) {
    // Prevent the default anchor navigation:
    ev.preventDefault();
    console.log('You would have navigated to:', ev.target.href);
  }
  else { // Not an anchor:
    console.log('You clicked another element:', ev.target.tagName);
  }
}

footer.addEventListener('click', handleFooterClick);

<footer>
  <h2>heading</h2>
  <div>
    <a href='a.aspx'>test 1</a>
    <a href='b.aspx'>test 2</a>
  </div>
  <a href='c.aspx'>test 3</a>
</footer>

CodePudding user response：

You can simply use your own redirect function. As e.g. try this:

<footer>
    <div>
         <a onclick='redirectTo("a.aspx");'>test 1</a>
         <a onclick='redirectTo("b.aspx");'>test 2</a>
    </div>
    <a onclick='redirectTo("c.aspx");'>test 3</a>
<footer>

And in JavaScript:

<script>
    function redirectTo(targetLocation) {
        // Do whatever you want and send user to new location
        window.location = targetLocation;
    }
</script>