Javascript jQuery绑定单击立即触发

我有一个下拉菜单，点击图标会将类“Open”添加到它的父类，然后点击任何地方的菜单会将其关闭。但当单击图标时，绑定中的函数将启动。其效果是，它将打开类，然后立即将其删除

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

这个问题可能类似，但仍然无法解决：

---

我认为您可能对DOM树中冒泡的click事件有问题。这就是为什么click也会被激发到父对象上

如果将事件对象作为第一个绑定的参数传入并调用

event.stopPropagation（）

，如下所示

$(function () {

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

});

---

应该解决您的问题。

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

$(function () {

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

    });

这将确保单击图标时不会触发父事件。。

---

此外，每次单击图标时，父对象的事件都会再次绑定，这将创建多个单击事件。。需要确保解除绑定并再次绑定它们，以避免..

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

在我的情况下，当我使用类似的东西时

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

它不起作用，好像马上就要开火了

我的解决方案是：

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

---

你试过使用（）而不是bind（）吗？On与bind的工作方式不同，我在使用bind时也遇到过类似的问题。另外，On现在更倾向于绑定。建议阅读：从jQuery 1.7开始，.On（）方法是将事件处理程序附加到文档的首选方法。您可以阻止事件在DOM中冒泡。设置超时将是不必要的。马克同意，尽管他可能希望在该事件中触发更高级的处理程序。我编辑了我的答案以反映这一点。显然，这是正确的方法，但是因为它是第一次触发的，所以e.stopPropagation（）应该是一个级别（在第一个绑定内）。谢谢你！常量绑定/解除绑定是一种反模式，通常表示您做错了什么。是的，但每次单击下拉操作类时，都会将新的单击事件绑定到父类。。你希望如何控制这种行为。还有其他解决办法。我对嵌套处理程序持怀疑态度，但如果没有更多信息，我无法判断它是否合适。如果你发布一个更惯用的解决方案，我会+1你…如果单击嵌套元素也应该关闭菜单，我甚至可能会这样做。这不会处理代码中的其他问题。这只是暂时掩盖他们。他的问题是关于事件的泡沫。未将多个事件侦听器绑定到同一处理程序。这是另一个问题，不是他问题的原因。它没有掩盖任何东西。他不想让事件冒泡到家长那里，不管家长连接了多少次点击事件监听器。是的，你说得对。去他妈的。让他在将来的某个时候找到他自己的bug（希望如此）。提出改进别人代码的建议是很好的。然而，如果这些建议不能回答这个问题，那么它就不值得回答，而是值得评论。我想不同的教学哲学。

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