span with onclick event inside a tag

Question

Sample code

<a href="page" style="text-decoration:none;display:block;">
    <span onclick="hide()">Hide me</span>
</a>

Since the a tag is over the span is not possible to click it. I try z-index but that didnt work

Solution 1

<a href="http://the.url.com/page.html">
    <span onclick="hide(); return false">Hide me</span>
</a>

This is the easiest solution.

Solution 2

When you click on hide me, both a and span clicks are triggering. Since the page is redirecting to another, you cannot see the working of hide()

You can see this for more clarification

http://jsfiddle.net/jzn82/

Solution 3

Fnd the answer.

I have use some styles inorder to achive this.

<span 
   class="pseudolink" 
   onclick="location='https://jsfiddle.net/'">
Go TO URL
</span>
.pseudolink { 
   color:blue; 
   text-decoration:underline; 
   cursor:pointer; 
   }

https://jsfiddle.net/mafais/bys46d5w/

Comments

[Ben]

I must be onclick since the span tag is for delete a message

[srini]

you don't want other action,only for delete message

[Ben]

yes only for delete and will hide the hole message from the page

[Ben]

well that wont work since both of theme has to be available for clicking. If the user click on the link it will redirect him to the message page and if he click that span to delete it. And someone can by mistake to hover the span and will the delete it. And the href is dinamic with ids for the messages

[Ben]

if i edit your code and ad a path in the href when the span is click i get {"error": "Please use POST request"}

[duncanportelli]

then sorry I don't understand your question

[duncanportelli]

What do you actually want when you click the hyperlink? I am redirecting you to google. All you have to do is redirect him to a page of you own choice

[Ben]

noo look there is div that is inside a tag. if the user click the on the div it will redirect him to the page of the PM but in that div there is a span tag and when is click it will delete the message.But since they all are inside the a tag it dosent work..

[Ondra]

Works great. No need to set style for a-tag

[John R Perry]

Any idea doesn't this work if the function that is being fired by the onclick is defined inside window.onload?

[AmerllicA]

Lovely solution, even that doesn't need to event.stopPropagation();

[Ilias Mertzanidis]

works fine for me too! Could some one explaine to me why this solution actually works?