从 <a> 标签内的 link 行为中排除 <span>

Question

是否可以排除 <span> 标签在普通 hyperlink 中的点击并为其附加 jQuery 事件？

这是我的代码。我正在使用 bootstrap 的列表组作为导航元素

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

我尝试让整个 link 可点击，但不是里面的 <span> 容器，因为 class“图标”需要自己的点击功能。欢迎任何想法（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>

从 <a> 标签内的 link 行为中排除 <span>

Exclude a <span> from link behaviour within a <a> tag

html

javascript

hyperlink