Make onclick handler ignore clicks on links

Question

I have a custom onclick handler for a block element (set up through jQuery's .click() method). This block element can contain links.

I'm fairly certain this is possible, so, how do I have the handler simply return if it was a link I clicked on (so that the link is visited without running my code)?

score 7 · Accepted Answer · answered Sep 22 '09 at 09:21

7

Check the event object to see if the target is an anchor tag then return true:

$("div").click(function(eventObject){

    if($(eventObject.target).is("a"))
        return true;

    //run your code
});

answered Sep 22 '09 at 09:21

Jataro

2,548
1
17
17

Because the click target may also be a child (or descendant) of a link, it's safer to call ```.closest("a").length == 0``` rather than ```is("a")``` – gmcnaughton Feb 04 '13 at 20:03

score 2 · Answer 2 · answered Sep 22 '09 at 08:57

2

inside your click event, you can check what the event target tagname is:

$("#myDiv").click(function(e) {
  if (e.target.tagName.toLowerCase() == "a") {
    return true; //link clicked
  } else {
    //run your usual div click code here...
  }
});

answered Sep 22 '09 at 08:57

peirix

36,512
23
96
126

Thanks! Forgot about the event being passed in. Silly me. – Ryan McCue Sep 22 '09 at 09:17

score 0 · Answer 3 · answered Sep 22 '09 at 08:29

0

how about testing if the element is an anchor or not inside the on click function?

if(this.tagName() == "a")return true;

I didn't test it, check it and reply please

answered Sep 22 '09 at 08:29

Khodor

996
1
6
13

or this.target or sumthing just a comment if that dont work :D – n00b Sep 22 '09 at 08:30

score 0 · Answer 4 · edited May 23 '17 at 11:49

Checking the nodeName of event.target doesn't work if your links have descendent elements (e.g. <span> or <img>).

Instead, try walking up the tree from event.target (the deepest element) to event.currentTarget (the event the event handler was registered on) and checking whether any of those elements are clickable:

$("div").click(function(event) {
    if (clickableBetweenTargetAndCurrentTarget(event))
        return; // This click was probably already handled.
    doSomething();
});

function clickableBetweenTargetAndCurrentTarget(event) {
    for (var el = event.target; el && el != event.currentTarget; el = el.parentNode) {
        if (isClickable(el))
            return true;
    }
    return false;
}

function isClickable(el) {
    // TODO: Customize this as appropriate for your webpage.
    return el.nodeName == 'A' || el.nodeName == 'BUTTON';
}

Demo: http://jsbin.com/fojaco/2/

Note that you'll have to customize isClickable for your particular webpage; it's hard/impossible to tell whether an element is clickable in the general case.

An alternative approach would be to make sure that all clickable descendants call event.preventDefault(), then your click listener on the div only needs to check event.defaultPrevented (IE9+). Or the descendants could call event.stopPropagation(), as suggested on another answer, but calling stopPropagation can lead to subtle bugs.

Make onclick handler ignore clicks on links

4 Answers4