ansaurus

Question

How do I force the browser to only handle the top link if 2 elements are clickable?

Answer 1

+2 A:

You can stop event propagation by returning false from the anchor's click event handler.

<div onclick='location.href="http://www.example.com/"'&gt;
  <a href='#' onclick='alert("blah"); return false;'>click</a>
</div>

You've tagged this question with jQuery. In that case, you should be using unobtrusive Javascript so:

<div id="someid">
  <a href="#">click</a>
</div>

with:

$(function() {
  $("#someid").click(function() {
    window.location.href = "http://www.example.com";
  });
  $("#someid a").click(function() {
    alert("blah");
    return false;
  });
});

is a much cleaner solution.

cletus 2010-02-28 05:25:35

return false won't stop event propagation, it will only cancel the href link. (Regarding regular JS; I'm not familiar with jQuery)

konforce 2010-02-28 05:28:37

It wouldn't work with jQuery either. Returning false only stops execution for that specific element, it doesn't affect any other elements which might also have events. It's just like returning false in a function. It doesn't stop executing the entire page just because one function returned false, it just stops that function.

animuson 2010-02-28 05:31:38

cletus is close. Add an event parameter to the click handler function and call event.preventDefault() in the function body to prevent the default functionality of the element.

VFB 2010-02-28 05:37:31

Actually `return false` stops propagation (and prevents default).

cletus 2010-02-28 05:40:48

@komforce try it. `return false` absolutely stops event propagation. Try commenting out `return false` and seeing the difference.

cletus 2010-02-28 05:42:24

@cletus: That was the first thing I tried. Returning false does NOT prevent the onClick event on the div from executing. (Tested in Firefox and IE.)

animuson 2010-02-28 05:45:20

@animuson you have some other problem. I've tried it on Chrome and FF and it prevents it fine. Are you sure you're not clicking on the div and not the anchor? Believe me it works and this is intended behaviour. Look for some other problem.

cletus 2010-02-28 05:47:04

Ah, nice! My apologies though--I realized this is a duplicate of http://stackoverflow.com/questions/180211/jquery-div-click-with-anchorsBut your answer is absolutely right! I've changed my jQuery accordingly.

thinkswan 2010-02-28 05:50:01

@cletus: Plain JS will not cancel the propagation in this example with a return false. I've even tried the code verbatim, and it alerts the box (proof the `a` tag was clicked) and then goes to the website after pressing `OK`. I've never seen the behavior as you describe it, and would be interested in seeing a live demonstration.

konforce 2010-02-28 06:10:39

@cletus, @konforce, you're both right. `return false` will stop the default action plus it will stop bubbling, but only in jQuery. Sans-jQuery, `return false` does not stop propagation of the event, it only stops the default action.

J-P 2010-02-28 09:16:34

Answer 2

+3 A:

See http://www.quirksmode.org/js/events_order.html.

<div onclick='location.href="http://www.example.com/"'&gt;
  <a href='#' onclick='alert("blah"); event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); return false;'>click</a>
</div>

event.cancelBubble is for IE
event.stopPropagation() is W3C
return false is to cancel the href link.

konforce 2010-02-28 05:28:09

ansaurus

tags:

views:

answers:

How do I force the browser to only handle the top link if 2 elements are clickable?

related questions