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元素，在这种情况下停止传播将起作用。但是，我想到您可能想要停止父锚<a>的默认操作，在这种情况下，您需要阻止默认操作发生，因为单击由锚包装的元素将激活锚点默认情况下：

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

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

1 个答案: