Можно ли исключить теги <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> внутри, потому что классу «icon» нужна собственная функция клика. Любая идея (javascript, css, ...) приветствуется!

0
Marco 15 Сен 2020 в 13:12

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>
1
sandeep joshi 15 Сен 2020 в 10:37