當單擊父元素時似乎正在拾取它的子元素

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>