javascript - 按钮上的 JQuery Mobile "tap"事件也会触发它后面的元素上的 "tap"

Question

我有一个 JQuery Mobile 页面，其中的内容是一个列表，用户可以在其中点击以选择(突出显示)元素。选择所需数量的列表元素后，可以通过点击页脚中的删除按钮将其删除。该页面在我的桌面上运行良好，但在移动环境(iPhone 和 iPad)中，按下删除按钮还会触发按钮下方列表元素的点击事件。

这张图片显示了我的页面的正常外观。如果用户点击删除按钮，所选元素将被删除，但删除按钮下方的元素将突出显示。

为什么会发生这种情况，我该如何解决？

编辑(一些代码):这是事件映射器:

$(document).delegate("#delete-button", "tap", deleteButtonTapped);

函数如下:

var deleteButtonTapped = function(event, data) {
    event.stopPropagation();
    var possessedNotes = [];

    $('.ui-btn-up-e').each(function(){

        $(this).slideUp();
        var id = $(this).attr("id").split(" "); //id is loanId + " " + docId
        possessedNotes.push(notesList[[id[1], id[2]]]);
    });

//  console.log(possessedNotes);

    $.post("srv/move_notes_into_possession.php", { possessedNotes: possessedNotes }, function(response) {
        console.log(response);
    }, "json");

    $("#footer").slideUp();
};

Answer 1

我正在维护一个使用此功能的旧应用，但我发现发生了完全相同的问题。

我能够使用事件方法 preventDefault 来防止底层元素也被“窃听”。

$('#cancelButton').on('tap', function(event) {
            
    event.preventDefault();
    
    // event-handler code
});