How to redirect from DIV and bypass child anchor href

html redirect onclick href

22,557

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>

22,557

Author by

Gustavo Di Salvo

Updated on December 23, 2020

Comments

Gustavo Di Salvo over 3 years
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.
- Learner almost 11 years
  
  What browser are you using? It works in Firefox.
- Gustavo Di Salvo almost 11 years
  
  Hi, I'm using Firefox too. Maybe I didn't explain myself well, please read the "Update" I added to the question.
Gustavo Di Salvo almost 11 years

Thank you, but the result is the same: the image still use his own url and not the one of the parent div.
Gustavo Di Salvo almost 11 years

Great, that works but I'm yet having a problem that requires further explanation (I'm adding this in the request).
Gustavo Di Salvo almost 11 years

If I change the anchor code I need that sometimes his own href keeps working. Can I get your solution but with something like "if the parent onclick is not null then return false, else use anchor href"?
Gustavo Di Salvo almost 11 years

Thank you, but what I want is that a click on the image goes to that url and not to the anchor's url. I think I didn't explained it correctly. I've added more information to the request.
George Cummins almost 11 years

@GustavoDiSalvo Instead of adding new questions to your original post, you should consider marking the helpful one as correct and asking a new question. When an existing question is updated in this manner, it tends to invalid the answers which is confusing for everyone.
StMotorSpark almost 11 years

I must not understand what you are trying to do. Do you want both the div click and the image click to go to the same location or different locations?
Gustavo Di Salvo almost 11 years

@GeorgeCummins I'm really sorry, you're right. I'm new here and my English is not the best. I will do better next time :)
Gustavo Di Salvo almost 11 years

@imjared Excellent, thank you! I prefer to not change the anchor (because I have to change it in all the previous posts of the blog) but it works! Now I can move on :D