How to redirect from DIV and bypass child anchor href

Please I need your help with the code below. I want to add an onclick event to a whole DIV to redirect to an url but I cannot bypass the href included in a child anchor inside the DIV.:

i.e. (The goal is to redirect to google.com clicking anywhere on the image or the text):

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

This works fine when I use a local URL like 'file:///E:/Documents/Blog/Design/Tmp1.html' (I don't know why). Thank you.

Update: I'm adding the idea behind this request: I need this for the Index section of my blog that Blogger builds with the same routine that it uses for individual posts. In the Index I want that every click in the main Div redirects to the Post, but inside the post a click in the image must goes to the image's href. My idea was that the "onclick" event it's added dinamically to the DIV only for the Index section.

If you're intent on doing this inline (not recommend but it's your code), you can add a return false; to the inner anchor:

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/" onclick="return false;">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

Update: based on step 2 of your request (this is a terrible, terrible idea for a number of reasons but it works):

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/" onclick="if ( this.parentElement.parentElement.onclick ) { return false; }" id="demo">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

Set an onclick handler using javascript. the code would look something like this:

document.getElementById("mydiv").onclick = function(){
    // navigate to new page
    window.location.href = 'URL';
}

You will need to add an id to your div and pass it properly in the getElementById function.

You can also try something like this:

<div onClick="window.open('http://www.google.com','_blank');">

Change _blank with _self if you want it to open in same window.

来源：https://stackoverflow.com/questions/16949731/how-to-redirect-from-div-and-bypass-child-anchor-href

标签

html

redirect

onclick

href