javascript - 单击最前面的元素后，如何防止元素在另一个元素后面的行为？

Question

我目前有一个包含链接的 li 元素。在该链接内，我有一个图标包含在 i 附件中。当用户单击该图标时，会调用 JavaScript .click()，但会调用父元素的函数。我希望单击图标来触发仅作用于图标的功能。

如果这有帮助，这是我的列表项的样子:

<li class="saved-search">
  <a href="#" class="" style="display:none">
    <i style="display:none" class="fa fa-times-circle pull-right saved-search-delete"></i>
  </a>
</li>

Javascript 看起来像:

// this is the click event attached to the parent element of the icon
$('#save-search-name').keypress(function(event) {
 ...
});

// this is the icon click event
$('body').on('click', '.saved-search-delete', function(e) {
    var saved_search_id = $(this).attr('data-search-id');
    var searchJSON = {'id': saved_search_id };
    // console.log('TROLOLOLOLOLOOOOOOL 2');

    $.ajax({
        url: '/adv/saved_search/',
        contentType: 'application/json; charset=UTF-8',
        type: "DELETE",
        quietMillis: 200,
        data: JSON.stringify(searchJSON),
        success: function (response) {
            Messenger().post({
                 type: 'success',
                 message: 'Saved search successfully deleted.',
                 showCloseButton: true,
                   hideAfter: 3,
            });

        }
    }); // end ajax call

});

如何在我的 JavaScript 中隔离单击具有所需行为的图标的行为？我仍然希望链接是可点击的，并且按照它的默认行为应该允许的那样运行。但是，当单击其顶部的图标时，我只想触发该图标的行为。

Answer 1

停止事件传播:

$('body').on('click', '.saved-search-delete', function(event) {
    event.stopPropagation();
});

更新:

我的印象是您想阻止事件到达 #save-search-name元素，在这种情况下停止传播将起作用。但是，我突然想到您可能想要停止父 anchor 的默认操作 <a> ，在这种情况下，您需要防止默认操作发生，因为单击由 anchor 包裹的元素将默认激活 anchor :

$('body').on('click', '.saved-search-delete', function(event) {
    event.stopPropagation();
    event.preventDefault();
});

此外，如果停止传播对您不起作用，您可以在父级的点击处理程序中检查点击的目标是父级本身还是子元素，并根据需要执行操作:

$('#save-search-name').click(function (event) {
    if(event.target==this){
        alert("parent Clicked");
    }
});