CODEWITHSUNDEEP
javascriptjqueryonclick
Ryan McCue
Ryan McCue

Reputation: 1658

Make onclick handler ignore clicks on links

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)?

Upvotes: 3

Views: 3037

Answers (4)

John Mellor
John Mellor

Reputation: 13021

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.

Upvotes: 0

Jataro
Jataro

Reputation: 2588

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
});

Upvotes: 7

peirix
peirix

Reputation: 37771

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...
  }
});

Upvotes: 2

Khodor
Khodor

Reputation: 1006

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

Upvotes: 0

Related Questions