0

Hello i'm recently decided to move my ajax calls from the html elements into my external javaScript file. It works by a function getting executed whenever the client clicks on the page. That function determine which element was clicked on the page and proceeds to get the href attribute if the element is a link('a'). This works really well unless there's another element on top of the link. For example:

<a id="home" href="./"><div id="homeicon"></div></a>

So I was wondering how I could do to make the js detect ALL the elements it has clicked on(the whole stack of elements) and then get the link element('a') that is the highest up in the stack. However here's my current function without the click eventListener.

function linkHandler(e) {
    var e = window.e || e;

    // Makes sure the element clicked is a link
    if(e.target.tagName !== 'A' || useAjax == false){
        return false; // Exits if element isn't a link
    }

    // Makes sure to not use ajax when the middle mouse button and right is clicked
    if(e.button == 1 || e.button == 2){
        return false; // Exit the click wasn't left click
    }


    // Prevent regular page request
    e.preventDefault(); // Disables the default behaviour request behaviour


    // AJAX CALL


}

Another method of doing this would be to set eventListener to every damn link element with a loop obviously and then run a function that refresh the eventListeners after every ajax call.

I just have to say that I will not be using any kind of framework but a jquery answer might be helpfull to people with a simular problem.

I am honestly lost and would appreciate some help on this topic, Thanks.

Johan Sundman
  • 145
  • 1
  • 15
  • Shouldn't `window.e` be `window.event`? – Barmar Jul 17 '16 at 22:18
  • With jQuery you can use `$(document).on("click", "a", function()...)`. – Barmar Jul 17 '16 at 22:20
  • @Barmar I got part of my snippet from the top answer of a popular question, but i usually use `window.event` myself so I don't think it really matters. – Johan Sundman Jul 17 '16 at 22:21
  • I'm not sure I understand what you want to do. If you just want to get the link element, why do you need to detect all the other elements in the DOM hierarchy? – Barmar Jul 17 '16 at 22:21
  • What's wrong with the code you have? `document.addEventListener("click", linkHandler)` seems like it should work. – Barmar Jul 17 '16 at 22:24
  • @Barmar This is just one of many link elements on my page, so I can't just add manual event listeners to every link. – Johan Sundman Jul 17 '16 at 22:25
  • I stil don't understand. You write "how I could do to make the js detect ALL the elements it has clicked on". Why does it need to detect them all, not just the ``? – Barmar Jul 17 '16 at 22:26
  • @Barmar I might not have gotten the message through but the problem is that my linkHandler function will think I clicked the div when a div is wrapped with a link. For example: `
    `     – Johan Sundman Jul 17 '16 at 22:27
  • But it ignores that when it does `if (e.target.tagName != 'A')`. Then the event bubbles up to the `A` and the code executes. – Barmar Jul 17 '16 at 22:28
  • BTW, jQuery users already have a helpful question: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Jul 17 '16 at 22:28

0 Answers0