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树的问题。这就是为什么还要点击父母点击的原因。

如果您将事件对象作为第一个绑定的参数传递，并按如下方式调用event.stopPropagation()

$(function () {

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

});

应该解决您的问题。

Answer 2

您可以传递事件参数并停止事件的冒泡。试试这个

$(function () {

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

    });

这将确保在单击图标时不会触发父事件。此外，每次单击图标时，父级的事件都会再次绑定，这将创建多个单击事件。需要确保解除绑定并再次绑定它们以避免这种情况..

Answer 3

它正在立即触发，因为click事件冒泡到父节点然后触发该选择器。要解决此问题，您可以在第二个绑定周围使用setTimeout（）。

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

另一种选择是在第一次绑定时对事件执行stopPropagation（），但这会阻止任何其他处理程序触发该事件。

Answer 4

就我而言，当我使用这样的东西

$("#modal .button")[0].click(() => console.log('test'))

它不起作用，好像单击立即触发

对我来说解决方案是：

const button = $("#modal .button")[0];
$(button).click(() => console.log('test'));

jQuery绑定点击立即点击

4 个答案: