在锚标记内部的图像的Onclick不起作用

Question

我在锚标记内有一个图像标记，图像标记有一个灰色的星形图标，点击后我想将其更改为金色星形图标，所以在图像标记内我写了一个{{1}这有点。

# look up associated HUGO.Name per each term of yA
for (i in yA) {
eval(call("<-", as.name(i),
              annot[grepl(i, annot[,"Annotation"], fixed =T), "HUGO.Name"]))
}  
# make lists 
nSannot_list<- mget(yA)

但问题是，当我点击星形图标图像时，onlick功能会起作用，但会从锚标记的onclick="myFunction('activity');"加载网址。如何单击此图像标记并使页面无法加载？

感谢您的帮助

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

Answer 2

您可以使用如下的jquery功能

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

在onclick之后，执行event.stopPropagation()和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>