Question

我正在使用可点击的下拉菜单。当我单击.menu__link时，我将.show--dropdown添加到其父项以显示一个下拉列表。在此之前，我打电话给closeAlreadyOpenDropdown()以关闭打开的下拉列表（如果有）。当我点击closeAlreadyOpenDropdown()之外的窗口时，我也会调用.menu__link来关闭下拉菜单。

当我单击.menu__link时，由于事件冒泡，事件将触发并传递到窗口。为此，我必须检查单击的元素是我不喜欢的.menu__link还是.menu__dropdown。

if (
    e.target.classList.contains("menu__link") ||
    e.target.classList.contains("menu__dropdown")
  )
    return;

有没有比检查每个元素更好的方法呢？我听说可以通过stopPropagation窗口来完成此操作，但不知道如何正确使用它。这将是一个好习惯吗？还是我们不能将冒泡事件传递给其他类似的元素？谢谢。

const links = document.querySelectorAll(".menu__link");
const menuItems = document.querySelectorAll(".menu__item");

function closeAlreadyOpenDropdown() {
  //closing dropddown
  for (const menuItem of menuItems) {
    if (menuItem.classList.contains("show--dropdown")) {
      menuItem.classList.remove("show--dropdown");
    }
  }
}

for (const link of links) {
  link.addEventListener("click", function(e) {
    closeAlreadyOpenDropdown(); // first close opendropdown if there is any !
    const string = "show--dropdown";
    const elParent = this.parentNode;
    elParent.classList.add(string); // adding class to the parentNode
  });
}

window.addEventListener("click", function(e) {
  // closing the dropdown when user click outside the menu__link
  if (
    e.target.classList.contains("menu__link") ||
    e.target.classList.contains("menu__dropdown")
  )
    return; // return when clicking on menu__link or menu__drodown
  closeAlreadyOpenDropdown();
});

:root {
  --color-link: #00a1ff;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font-size: 16px;
}

.link {
  color: var(--color-link);
  text-decoration: none;
}

.dropdown {
  position: absolute;
  visibility: hidden;
}

.dropdown a {
  white-space: nowrap;
}

.menu__wrap {
  display: -webkit-box;
  display: flex;
  padding: 16px 0;
}

.menu {
  display: -webkit-box;
  display: flex;
  margin-left: auto;
  list-style: none;
  width: 75%;
}

.menu__item {
  position: relative;
  margin: 0 16px;
}

.menu__item.show--dropdown .dropdown {
  visibility: visible;
}

.menu__dropdown {
  padding: 8px 12px;
  left: 0;
  top: 100%;
  box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.menu__dropdown a {
  white-space: no-wrap;
  padding: 4px;
  display: block;
}

.menu__link {
  color: var(--color-link);
  text-decoration: none;
  padding: 8px 12px;
  display: block;
}

  <div class="menu__wrap">
      <ul class="menu">
        <li class="menu__item">
          <a href="#" class="menu__link">Home</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">About Us</a>
          <ul class="menu__dropdown dropdown">
            <li><a href="#" class="link">Our Courses</a></li>
            <li><a href="#" class="link">Our Campus</a></li>
            <li><a href="#" class="link">Upcomming events</a></li>
          </ul>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Career</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Contact Us</a>
        </li>
        <li class="menu__item  sh">
          <a href="#" class="menu__link">Download</a>
          <ul class="menu__dropdown dropdown">
            <li><a href="#" class="link">Download as pdf</a></li>
            <li><a href="#" class="link">Download as Excel</a></li>
            <li><a href="#" class="link">Download Details file</a></li>
          </ul>
        </li>
      </ul>
    </div>

如何停止Stop事件冒泡

0 个答案: