Question

我的项目中有使用Foundation 5.5.3

的代码

$(function() {
  var $carsDropdown = $("#cars-dropdown");

  // Close cars dropdown when clicking outside of it or on close button
  $("body, #cars-dropdown .btn-close").click(function(ev) {
    if ($carsDropdown.hasClass("open")) {
      console.log("Dropdown is open");
      console.log("Closing dropdown.\n");
      Foundation.libs.dropdown.close($carsDropdown);
      // ev.stopPropagation();
    }
    else {
      console.log("Dropdown is closed\n");
    }
  });
);

当我点击身体并且有效时，我希望这可以关闭div。当我点击.btn-close时，它也能很好地工作。

但是当我点击应该使用基础代码打开和关闭下拉列表的元素时，没有任何反应。控制台输出是这样的：

Dropdown is open.
Closing dropdown.

就像点击.btn-close时一样。

由此我得出结论，body上的某个事件会在基础事件之前触发按钮，该按钮应该切换下拉列表。我的事件关闭了下拉列表，基础代码将其打开。

身体事件怎么可能不会被触发？ Aren的事件应该最后从内部元素到身体标签起泡？

现在，当我取消注释ev.stopPropagation()行时，一切都按预期工作。点击身体防止传播到其他元素？这怎么可能？

请使用此代码集进行测试：https://codepen.io/anon/pen/BZyRLp

Answer 1

他们的事件监听器很可能被委托给文档，因此您可以动态添加这些功能。

这就是你在添加课程之前看到身体事件的原因

检查目标，如果是data-dropdown元素

，则不要执行任何操作

$("body, #cars-dropdown .btn-close").click(function(e) {

  if (!$(e.target).closest('[data-dropdown]').length) {

    if ($carsDropdown.hasClass("open")) {
      console.log("Dropdown is open");
      console.log("Closing dropdown.\n");
      Foundation.libs.dropdown.close($carsDropdown);
    } else {
      console.log("Dropdown is closed\n");
    }
  } else {
    console.log('Foundation Dropdown button');
  }
});

为什么我的事件在特定元素的事件之前被调用？

1 个答案: