javascript - anchor 标记内图像的单击不起作用

Question

我在 anchor 标签内有一个图像标签，图像标签有一个灰色的星形图标，点击它我想将它更改为金色星形图标，所以在图像标签内我写了一个 onclick ="myFunction('activity');" 执行此操作。

<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>

但问题是，当我点击星形图标图像时，onlick 函数起作用但从 anchor 标记的 href="/projects/test-project/activity" 加载 url .如何单击此图像标记并使页面不加载？

感谢您的帮助

Answer 1

从 html 中删除 onclick 函数并像这样更新代码:

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');
    });
});