按钮上的 JQuery Mobile“点击”事件也会触发它后面的元素上的“点击”

Posted 2023-05-09

【中文标题】按钮上的 JQuery Mobile“点击”事件也会触发它后面的元素上的“点击”

【英文标题】：JQuery Mobile "tap" event on button also triggers "tap" on element behind it

【发布时间】：2013-07-11 07:48:12

【问题描述】：

我有一个 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();
;

【参考方案1】：

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

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

【讨论】：

感谢您的信息！但是，这并没有解决我的问题。我不认为删除按钮元素和列表元素是相关的 DOM 元素。另一个问题，每当我将事件映射到函数时，我应该使用 event.stopPropagation() 吗？

当你说“这并没有解决我的问题”时，可能是你没有做对 - 发布一些代码。如果删除按钮位于另一个元素的顶部，则该事件将传递到下面的元素。不，您不一定要在每种情况下都停止传播。

在event.stopPropagation() 之后添加event.stopImmediatePropagation() 有什么不同吗？

不似乎是一样的。

我找到了问题的根源。当 footer.slideUp() 被调用时，下面的元素会以相同的动作显示和点击。你知道我可以如何将页脚向后滑动但不触发下面元素上的点击事件吗？非常感谢