3

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

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

这个问题可能类似但还是不能解决：jQuery bind event fire the event

$(function () {

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

});
4

4 回答 4

8

我认为您可能对在 DOM 树中冒泡的单击事件有问题。这就是为什么点击也会在父母身上被解雇。

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

$(function () {

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

});

应该解决您的问题。

于 2012-09-23T22:14:43.053 回答
0

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

$(function () {

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

    });

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

于 2012-09-23T22:14:54.597 回答
0

它会立即触发，因为单击事件会冒泡到父级，然后触发该选择器。要解决此问题，您可以在第二次绑定周围使用 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()，但这会阻止任何其他处理程序触发该事件。

于 2012-09-23T22:16:08.557 回答
0

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

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

它不起作用，似乎立即点击触发

我的解决方案是：

const button = $("#modal .button")[0];
$(button).click(() => console.log('test'));
于 2020-05-10T17:43:29.697 回答