锚标签内的图片的Onclick无效

Question

I have an image tag inside an anchor tag, the image tag has a greyed out star icon which on click I want to change it to a golden colour star icon, so inside the image tag I have written a onclick="myFunction('activity');" which does this bit.

<a href="/projects/test-project/activity" class="activity">
<img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" onclick="myFunction('activity');" id="activity">
Activity</a>

But the problem is that when I click on the star icon image, the onlick function works but loads up url from the href="/projects/test-project/activity" from the anchor tag. How do I click on this image tag and make the page not get loaded?

Thanks for any help

Answer 1

Remove onclick function from the html and update the code like this:

HTML :

<a href="/projects/test-project/activity" class="activity">
    <img width="16" height="16" alt="grey star" src="/img/star.png" 
         style="position:relative;left:180px;top:3px;z-index:100"  id="activity">
    Activity
</a>

JQuery :

$(document).ready(function(){
    $('#activity').click(function(event){
        event.preventDefault();
        myFunction('activity');
    });
});

Answer 2

You can use jquery function as below

 $(function(){ $('#activity').on('click', function(e){ e.preventDefault(); alert('I am in'); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="/projects/test-project/activity" class="activity"> <img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" id="activity"> Activity</a> 

Answer 3

After onclick , do event.stopPropagation() and return false();

<a href="/projects/test-project/activity" class="activity">
<img width="16" height="16" alt="grey star" src="/img/star.png" style="position:relative;left:180px;top:3px;z-index:100" onclick="myFunction('activity');event.stopPropagation();return false();" id="activity">
Activity</a>