时间戳

首页 > 解决方案 > 用纯javascript将点击事件附加到他的父亲身上

javascript - 用纯javascript将点击事件附加到他的父亲身上

问题描述

纽比到纯 JS。

我正在创建一个必须与移动设备配合使用的菜单。

我正在尝试使用纯 .js 创建，而不是使用 jQuery，所以这是一个实验，它一直具有挑战性。

这是我的代码：

JS：

(function() {
  var menu = document.querySelector('.mobile-menu');
  var subMenu = {
    downToggle: document.getElementsByClassName('sub-menu'),
    downToggleTitle: document.getElementsByClassName('sub-menu-title'),
    subMenuItems: document.getElementsByClassName('sub-menu-item-mobile'),
    searchBar: document.getElementById('mobile-search'),
    onclickimg: document.querySelectorAll('.sub-menu-arrow'),
  };
  function listen() {
    for(var i=0; i<subMenu.downToggleTitle.length; i++) {
      subMenu.downToggleTitle.item(i).addEventListener('click', function(e) {

        // if there is a menu that's already open and it's not the element that's been clicked, close it before opening the selected menu
        for(var i=0; i<subMenu.downToggleTitle.length; i++) {
          if (subMenu.downToggleTitle.item(i).classList.contains('expanded') && subMenu.downToggleTitle.item(i) !== e.target) {
            subMenu.downToggleTitle.item(i).classList.toggle('expanded');
          }
        }

        // inside each sub-menu is a third-level-sub-menu. So inside each sub-menu we
        // check if it's already open, then close it
        for(var i=0; i<subMenu.subMenuItems.length; i++) {
          // console.log("test test")
          if(subMenu.subMenuItems.item(i).classList.contains('expanded') && subMenu.subMenuItems.item(i) !== e.target) {
            subMenu.subMenuItems.item(i).classList.toggle('expanded');
          }
        }
        this.classList.toggle('expanded');
      });
    }

    for(var i=0; i<subMenu.subMenuItems.length; i++) {
      subMenu.subMenuItems.item(i).addEventListener('click', function(e) {
        for(var i=0; i<subMenu.subMenuItems.length; i++) {
          if(subMenu.subMenuItems[i].classList.contains('expanded') && subMenu.subMenuItems[i] !== e.target) {
            subMenu.subMenuItems[i].classList.toggle('expanded');
            console.log("hello Aug 20");
          }
        }
        this.classList.toggle('expanded');
      });
    }
  } listen();
}());

我要更改的行为如下：

在第一个版本中，如果客户端按下作为项目的.sub-menu-title类（变量downToggleTitle），则该li元素将切换类expanded。现在我想要一些不同的东西。

我在列表元素的最后添加了 class sub-menu-arrow，它是变量onclickimgan img，所以如果客户点击箭头，所有的 class 元素sub-menu-title( var = downToggleTitle) 都会切换 class expanded。

这不会发生，因为由于某种原因，如果我以这种方式更改代码：

subMenu.onclickimg.item(i).addEventListener('click', function(e) {
        for(var i=0; i<subMenu.downToggleTitle.length; i++) {
          if (subMenu.downToggleTitle.item(i).classList.contains('expanded') && subMenu.downToggleTitle.item(i) !== e.target) {
            subMenu.downToggleTitle.item(i).classList.toggle('expanded');
          }
        }

该类expanded将切换到sub-menu-arrow元素（就像我说的，一些带有动画的图像）。

在这种情况下如何定位父元素有什么建议吗？

另外，是否可以mobile-toplevel-link从点击事件中排除带有类的锚元素？

该<a>元素是sub-menu-title该类的其他孩子

标签： javascripthtml

解决方案

如果你想获取点击目标的父元素，那么你可以利用你的 currenteventListener并使用e.target.parentNode来获取它。这将返回一个元素，您可以在其中添加/删除 CSS 类并执行几乎所有您喜欢的操作。请记住，您可以.parentNode多次使用，例如，如果您想获得一个元素的“祖父母”（2 级以上），您可以编写e.target.parentNode.parentNode等等。

推荐阅读