JavaScript Click Event Handling

Question

So I attach an event to the document to watch when a click event happens on a specific anchor with a class yui3-pjax, in some instances the anchor has a span child element. How is it I can watch for just the click event bubbles to just the anchor? My current if-statement for watching the event is:

document.addEventListener('click', function(evt) {
  if(evt.target.classList.contains('yui3-pjax') || evt.target.parentNode.classList.contains('yui3-pjax')) {
    // do stuff
  }
});

HTML snippets

<a class="page_current yui3-pjax" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/" title="page 67">
  67
</a>
<a class="yui3-pjax cta-button-sm gray-button postitem-link pull-right" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/">
  <span>67</span>
</a>

I'm not sure if there's a better way than watching both the anchor and the span element's parent (the same anchor) without binding it to the anchor itself, but the problem with that is some of the anchors are dynamically generated, and this clearly won't work since it'll reference the document. Any ideas?

Edit: I think there's some confusion about what I'm asking. Let me clarify, I only want to have to check the anchor if it has the yui3-pjax class. I'm not sure how to handle the propagation/bubbling of the event from the child or descendant element of that anchor to achieve that.

Added. It's a simple span element inside of the anchor, if it were just the anchor all I'd have to do is check if the event target has the class, but since some instances will have a span, currently I have to check the span's parent (the same anchor) when the span element exists. — Knight Yoshi
– Knight Yoshi, Commented Sep 22, 2014 at 19:05
And I've checked things like the YUI about how to checks the YUI3-PJAX anchor and also how Bootstrap handle their clicks on elements when they add the click event to the document and watch for the element (in this case an anchor), but I haven't figured out how they just watch for the event on the anchor, I assume the propagation/bubbling? — Knight Yoshi
– Knight Yoshi, Commented Sep 22, 2014 at 19:07
i dont understand what isnt working? check this jsfiddle.net/tc6asav7 — Sunand
– Sunand, Commented Sep 22, 2014 at 19:10
It's not that it's not working, I'm asking how can I handle the click event by just watching for the anchor with the yui3-pjax class being clicked, instead of also having to watch the anchor, and the possible parent anchor to the span. For instance, you can add a new anchor yui3-pjax it doesn't matter how many elements are in it has as long as the anchor itself has the class yui3-pjax it'll still fire the PJAX, event. Which means the YUI library isn't watching just the anchor a child element, and the event isn't added directly to the anchor since dynamically added anchors fire the event too. — Knight Yoshi
– Knight Yoshi, Commented Sep 22, 2014 at 19:18

p e p · Accepted Answer · 2014-09-23 03:31:07Z

1

Hope I'm understanding this correctly. Instead of manually checking the element and the parent for a certain class, I would instead write a function that recurses up the DOM to find out whether the event target is contained within an element with the given class. This way, you don't have to write code that relies on the structure of the HTML, but that rather dynamically determines whether or not your element lives inside an element with (e.g.) class 'yui3-pjax'. Note I am not checking if the element with class 'yui3-pjax' is an anchor, but you can add that in if needed. Check out the fiddle http://jsfiddle.net/9L0jce6x/.

document.addEventListener('click', function(evt) {
    if(elementOrParentsHaveClass(evt.target, 'yui3-pjax')){
        //do stuff
    }
});

//Recurse up the DOM until we find a parent with the given class, or return false if we don't
function elementOrParentsHaveClass(elem, className){
    if(elem && elem.classList.contains(className)){
        return true;  //yay!
    }else{
        //Recurse only if parent exists
        if(elem.parentNode){
            return elementOrParentsHaveClass(elem.parentNode, className);
        }
        else{
            //If the parent node does not exist, end recursion - we finished recursing up the DOM
            return false;
        }
    }
}

answered Sep 23, 2014 at 3:31

p e p

6,6742 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Knight Yoshi Over a year ago

Perfect thank you! I don't really use recursion (haven't found a need until now I guess), so it didn't occur to me to use that.

Collectives™ on Stack Overflow

JavaScript Click Event Handling

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related