排除<span>标记中的 from 链接行为<a>

Question

是否可以在普通超链接中排除<span>标记的点击，并将jQuery事件附加到它？

这是我的密码。我正在使用引导程序的列表组作为导航元素

<ul class="list-group">
<a href="mylink.html" class="list-group-item node-tree" data-nodeid="0">
<span class="icon fa"></span>
<span class="icon node-icon"></span>
Node 1            
</a>
<a href="mylink2.html" class="list-group-item node-tree" data-nodeid="1">
<span class="icon fa"></span>
<span class="icon node-icon"></span>
Node 2
</a>
<a href="mylink3.html" class="list-group-item node-tree" data-nodeid="2">
<span class="icon fa"></span>
<span class="icon node-icon"></span>
Node 3            
</a>   
</ul>

我试图让整个链接可点击，但不是里面的<span>容器，因为类"；图标"；需要自己的点击功能。欢迎任何想法(javascript，css，…(！

Answer 1

您可以尝试阻止默认值，这样点击就不会传播到父锚点函数。

$('.fa-genderless').click(function(event){
console.log('icon clicked');
//do something here.
event.preventDefault();
});

$('.fa-file').click(function(event){
console.log('file icon clicked');
//do something here.
event.preventDefault();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
<a href="mylink.html" class="list-group-item node-tree" data-nodeid="0">
<span class="fa-genderless"></span>
<span class="fa fa-file"></span>
Node 1            
</a>
<a href="mylink2.html" class="list-group-item node-tree" data-nodeid="1">
<span class="fa-genderless"></span>
<span class="fa fa-file"></span>
Node 2
</a>
<a href="mylink3.html" class="list-group-item node-tree" data-nodeid="2">
<span class="fa-genderless"></span>
<span class="fa fa-file"></span>
Node 3            
</a>   
</ul>