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

Question

I am try to make an accordion using Vanilla JavaScript however if there is a child div element inside the header of the accordion to does not seem to work and I don't know why. However if there is not a child div element then accordion works fine.

 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>

The code pen to my problem is https://codepen.io/mrsalami/pen/WNrBboR?editors=1111

Answer 1

I believe evnt.target can be div.test, so you need to normalize the target like so

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

after that operation, you should use target.

Answer 2

I think this will work. I just removed this line "coll[j].nextElementSibling.style.maxHeight = null;" from the loop.

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

Option 1

If you want a quick fix, just add this css:

.test {
    pointer-events: none;
}

This will make the element undetectable by the mouse click.

Option 2

If you want a true fix, here is what you are doing wrong: evnt.target gives the true target of the click event, which is the inner-most element the mouse is hovering when clicked. Therefore, this is not the best method to identify which element you should add/remove the class active to/from.

@AngelSalazar gave a great solution for this issue, so let me just borrow his solution:

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;
    ...

This will go backwards through the element's parents looking for a match for the selector and will certify you are talking to the header, not one of its children.

Here is the working solution, based on the provided 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>