按钮上的JQuery Mobile“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

DOM元素上的事件传播或“冒泡”。您需要在事件处理程序中使用jQuery的event.stopPropagation()函数来阻止事件传递到父元素。

http://api.jquery.com/event.stopPropagation/