jquery click event -

Question

I want to perform an action when a user clicks on a div. However if he clicks on link within div, I want to send him directly to link. Now the href is being ignored.

<div id=myDiv>

   some text
   <a href="link1">my link</a>

   some text
   <a href="link2">my link</a>

   some text
   <a href="link3">my link</a>
<div>


$('.myDiv').live('click', function() {          
        console.log($(this));
        // if clicked on link, the go directly to the link
        ....
        // if clicked elsewhere on div, then perform another another action and return false
        return false;

    });

====== MY SOLUTION ====

I liked Rob's solution but the syntax was a bit vexing, so RTFM and came up with something similar that works for me.

$('.myDiv').live('click', function(event) {         
   var $target = $(event.target);
   if( $target.is("a") ) {
    return true;
    }
    else{
      // do something else
      return false;
    }
});

This works...performs the href after doing other stuff, but would prefer to go directly to link. — Mustapha George
– Mustapha George, Commented Nov 6, 2011 at 16:32

Rob W · Accepted Answer · 2011-11-06 16:30:42Z

1

Check the event.target property. The code below does not execute return false when an anchor is clicked.

$('.myDiv').live('click', function(event) {
    ....
    // `return false` only if element != <a>
    if(!$.nodeName(event.target, "a")) return false;

});

answered Nov 6, 2011 at 16:30

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

5 Comments

Hogan Over a year ago

Doesn't he want if($.nodeName(e.target, "a")) return true; where the .... is?

Rob W Over a year ago

@Hogan He wants to follow the link. return false prevents the link from being followed. I have modified his code so that return false will not occur when the current target is an anchor, which has the same effect as return true.

Hogan Over a year ago

So the default is to return true? I did not see that in your code.

Rob W Over a year ago

$.nodeName checks whether the given element (event.target = currently clicked element) is an <a> element ("a"). The ! before the statement negates the expression. So, if the current element is not an <a> element, the function returns false, effectively blocking click events. When a link is clicked, the function works. @Hogan Inside a click event handler return true is equivalent to just return.

Mustapha George Over a year ago

sorry I meant my code was ambiguous fragment. Yours was just vexing.

Ry- · Accepted Answer · 2011-11-06 16:32:43Z

1

Call stopPropagation() when the links are clicked:

$('.myDiv').live('click', function(e) {
    // Perform your action here
});

$('.myDiv a').live('click', function(e) {
    e.stopPropagation();
});

answered Nov 6, 2011 at 16:32

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

2 Comments

Hogan Over a year ago

Isn't this the reverse of what he wants -- this stops a link from working, he wants the link to work.

Ry- Over a year ago

@Hogan: Nope - stopPropagation() isn't preventDefault(). jsfiddle.net/8sfdQ (Hehe... the example doesn't work because of the cross-origin rule for iframes. Oops :P If you go to /show/ it does.)

Collectives™ on Stack Overflow

jquery click event -

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related