How do I make a full DIV clickable with an anchor...but inside that DIV, have an input button that doesn't follow that anchor?

Question

I tried this:

<div style="display:block;">
<a href="/go" style="display:block;height:100%;width:100%;position:absolute;"></a>
LOTS OF STUFF HERE 
<input type="button" onclick="runsomething();return false;">
</div>

But it doesn't work. It does click to follow the anchor...but the button also follows anchor, which I don't want.

Edit:The button won't even click. It won't press down! It's like the Anchor completely covered it.

Answer 1

You can cause the event to cease propagation from the button on up so it never arrives at the DIV.

$(".myDiv input").click(function(e){
  e.stopPropagation();
});

For more information on event.stopPropagation, see http://api.jquery.com/event.stopPropagation/

For some reason, you have your anchor taking up the entire size of the parent container. Why? This will cover up your button, likely making it unclckable. I understand that you would like to make the entire DIV clickable, but this is the wrong approach. Consider the following:

$(".myDiv").click(function(){
  window.location = $("a:first", this).attr("href");
});

This would cause a click on this DIV to send the user to wherever its link would have sent them. Best thing is you don't need to add any CSS to your link, or DIV. Javascript will go and find the link within the div, get its href value, and send the user off in that direction.