当单击父元素时似乎正在拾取它的子元素

Question

我正在尝试使用 Vanilla JavaScript 制作手风琴，但是如果手风琴的 header 中有子 div 元素似乎不起作用，我不知道为什么。 但是，如果没有子 div 元素，则手风琴可以正常工作。

 var coll = document.getElementsByClassName("m40__grid__item"); coll[i].addEventListener("click", function (evnt) { let target = evnt.target; if (.target.matches('.m40__grid__item') ) { target = target.closest(';m40__grid__item'). } const currClassList = target;classList. if (currClassList.contains("active")) { evnt.target.classList;remove("active"). var content = evnt.target;nextElementSibling. content.style;maxHeight = null; } else { for (var j = 0. j < coll;length. j++) { coll[j].classList;remove("active"). coll[j].nextElementSibling.style;maxHeight = null. } this.classList;toggle("active"). var content = this;nextElementSibling. if (content.style.maxHeight) { content.style;maxHeight = null. } else { content.style.maxHeight = content;scrollHeight + "px"; } } }); }

 <div class="m40__grid"> <div class="m40__grid__item"> <div class="test"> This header doesn't work </div> </div> <div class="m40__grid__item--full-width"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="m40__grid__item">Click me,</div> <div class="m40__grid__item--full-width"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>

我的问题的代码笔是https://codepen.io/mrsalami/pen/WNrBboR?editors=1111

Answer 1

我相信evnt.target可以是div.test，所以你需要像这样标准化目标

var target = event.target;
if (!target.matches('.m40__grid__item')) {
 target = target.closest('.m40__grid__item');
}

在该操作之后，您应该使用目标。

Answer 2

我认为这会奏效。 我刚刚删除了这一行“coll[j].nextElementSibling.style.maxHeight = null;” 从循环。

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    const currClassList = evnt.target.classList;
    if (currClassList.contains("active")) {
      evnt.target.classList.remove("active");
      var content = evnt.target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 3

选项1

如果您想快速修复，只需添加此 css：

.test {
    pointer-events: none;
}

这将使鼠标单击无法检测到该元素。

选项 2

如果你想要一个真正的修复，这就是你做错的事情： evnt.target给出了点击事件的真正目标，这是鼠标点击时鼠标悬停的最里面的元素。 因此，这不是确定应该向/从哪个元素添加/删除active的 class 的最佳方法。

@AngelSalazar 为这个问题提供了一个很好的解决方案，所以让我借用他的解决方案：

coll[i].addEventListener("click", function (evnt) {
    let target = evnt.target;
    if (!target.matches('.m40__grid__item')) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    ...

这将 go 向后通过元素的父母寻找选择器的匹配项，并证明您正在与 header 交谈，而不是它的孩子之一。

这是基于提供的 codepen 的工作解决方案。

 var coll = document.getElementsByClassName("m40__grid__item"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function (evnt) { let target = evnt.target; if (.target.matches('.m40__grid__item')) { target = target.closest(';m40__grid__item'). } const currClassList = target;classList. if (currClassList.contains("active")) { target.classList;remove("active"). var content = target;nextElementSibling. content.style;maxHeight = null; } else { for (var j = 0. j < coll;length. j++) { coll[j].classList;remove("active"). coll[j].nextElementSibling.style;maxHeight = null. } this.classList;toggle("active"). var content = this;nextElementSibling. if (content.style.maxHeight) { content.style;maxHeight = null. } else { content.style.maxHeight = content;scrollHeight + "px"; } } }); }

 .m40__grid__item { background-color: #777; color: white; cursor: pointer; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; }.active, .m40__grid__item:hover { background-color: #555; }.m40__grid__item:after { font-family: 'FontAwesome'; /* essential to enable caret symbol*/ content: "\f067"; color: white; font-weight: bold; float: right; margin-left: 5px; margin-right: 30px; }.active:after { content: "\f068"; }.m40__grid__item--full-width { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; }

 <div class="m40__grid"> <div class="m40__grid__item"> <div class="test"> This header doesn't work </div> </div> <div class="m40__grid__item--full-width"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="m40__grid__item">Click me,</div> <div class="m40__grid__item--full-width"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>