javascript - jQuery 绑定(bind)点击立即触发

Question

我有一个下拉菜单，单击该图标会将“打开”类添加到其父级，然后在任意位置单击该菜单应将其关闭。但是当单击图标时，绑定(bind)中的函数会触发。效果是它添加了 Open 类，然后立即将其删除。

这可能是一个简单的问题，但我似乎无法理解为什么“点击”事件会立即触发!？

这个问题可能是类似的，但仍然无法解决:jQuery bind event firing the event

$(function () {

    $(".ui-dropdown-action").bind("click", function () {
        $(this).parent()
            .addClass("Open")
            .bind("click", function () {
                $(this).removeClass("Open");
            });
    });

});

Answer 1

我认为您可能对在 DOM 树中冒泡的单击事件有疑问。这就是为什么点击也会在父级上触发。

如果您传入事件对象作为第一个绑定(bind)的参数并调用 event.stopPropagation()，如下所示

$(function () {

  $(".ui-dropdown-action").bind("click", function (event) {
    event.stopPropagation();
    $(this).parent()
        .addClass("Open")
        .bind("click", function () {
            $(this).removeClass("Open");
        });
  });

});

应该可以解决您的问题。