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

This is just a simple sample code :D there is another stuff inside the a tag. I want to hide the hole thing — Ben, May 02 '12 at 11:38
So you want to hide the span when clicking the hyperlink. Am I right? — duncanportelli, May 02 '12 at 11:38
noo the hide function will hide the hole a tag. There is a loop that shows 10 . And i use .closest().fadeOut(); but i cant click the span tag because of the a tag — Ben, May 02 '12 at 11:41

Mark · Accepted Answer · 2015-01-05T11:46:28.470

72

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

This is the easiest solution.

edited Jan 05 '15 at 11:46

answered Sep 14 '13 at 18:40

Mark

3,224
2
22
30

Works great. No need to set style for a-tag – Ondra Feb 01 '14 at 10:29
Any idea doesn't this work if the function that is being fired by the `onclick` is defined inside `window.onload`? – John R Perry Feb 02 '17 at 01:47
Lovely solution, even that doesn't need to `event.stopPropagation();` – AmerllicA Nov 12 '17 at 14:22
1

works fine for me too! Could some one explaine to me why this solution actually works? – Ilias Mertzanidis Jan 04 '21 at 16:14

Nauphal · Answer 2 · 2012-05-02T11:49:20.877

11

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/

edited May 02 '12 at 11:49

answered May 02 '12 at 11:43

Nauphal

6,194
4
27
43

score 5 · Answer 3 · answered Mar 31 '16 at 16:41

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/

srini · Answer 4 · 2012-05-02T13:03:37.087

0

use onmouseup

try something like this

        <html>
        <head>
        <script type="text/javascript">
        function hide(){
        document.getElementById('span_hide').style.display="none";
        }
        </script>
        </head>

        <body>
        <a href="page" style="text-decoration:none;display:block;">
        <span   onmouseup="hide()" id="span_hide">Hide me</span>
        </a>
        </body>
        </html>

EDIT:

          <html>
        <head>
        <script type="text/javascript">
        $(document).ready(function(){
         $("a").click(function () { 
         $(this).fadeTo("fast", .5).removeAttr("href"); 
        });
        });
        function hide(){
        document.getElementById('span_hide').style.display="none";
        }
        </script>
        </head>

        <body>
        <a href="page.html" style="text-decoration:none;display:block;" onclick="return false" >
        <span   onmouseup="hide()" id="span_hide">Hide me</span>
        </a>
        </body>
        </html>

edited May 02 '12 at 13:03

answered May 02 '12 at 11:45

srini

876
3
12
23

I must be onclick since the span tag is for delete a message – Ben May 02 '12 at 12:11
you don't want other action,only for delete message – srini May 02 '12 at 12:12
yes only for delete and will hide the hole message from the page – Ben May 02 '12 at 12:14
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 May 02 '12 at 13:10

score 0 · Answer 5 · answered Apr 14 '22 at 08:25

You don't have to use a tag to click it. onclick event already do this. Just give an id to your span and hide it with javascript like this.

<span id="should_hide" onclick="hide()">Hide me</span>


<script>
function hide(){
document.getElementById("should_hide").style.display = 'none';
}
</script>

score -1 · Answer 6 · answered May 02 '12 at 11:43

I would use jQuery to get the results that you're looking for. You wouldn't need to use an anchor tag at that point but if you did it would look like:

<a href="page" style="text-decoration:none;display:block;">

<span onclick="hide()">Hide me</span>

</a>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js' /
<script type='text/javascript'>
$(document).ready(function(){
     $('span').click(function(){
           $(this).hide();
     }
}

score -2 · Answer 7 · answered May 02 '12 at 11:44

-2

You could use jQuery

http://jsfiddle.net/Bdqv7/

answered May 02 '12 at 11:44

duncanportelli

3,161
8
38
59

if i edit your code and ad a path in the href when the span is click i get {"error": "Please use POST request"} – Ben May 02 '12 at 13:16
then sorry I don't understand your question – duncanportelli May 02 '12 at 13:24
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 – duncanportelli May 02 '12 at 13:25
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.. – Ben May 02 '12 at 13:28

span with onclick event inside a tag

7 Answers7

Linked