使附加的孩子还触发父元素

Question

我在应用程序中为每个 li元素附加了2个按钮：

  todoLi.appendChild(this.createToggleButton());
  todoLi.appendChild(this.createDeleteButton());

稍后，我添加了事件侦听器以触发 li时触发

todosUl.addEventListener('mouseover', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi') {
    elementMousedOver.lastElementChild.style.display = 'inline';
  }
});
todosUl.addEventListener('mouseout', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi') {
    elementMousedOver.lastElementChild.style.display = 'none';
  }
});

一切都适合 li元素，但是当我鼠标鼠标在按钮上（是李元素的孩子）时，事件听众毕竟是由于某种原因而停止工作的，如果bottons毕竟不是李元素的孩子。

如何让附属的孩子也触发其父母的事件听众？

这是我在github上的应用：https：//mikestepanov.github.io/

用文件回购：https：//github.com/mikestepanov/mikestepanov.github.io

Answer 1

事件默认情况下正在燃烧DOM，因此从LI触发的事件也会触发UL，问题是您的IF语句仅处理事件的情况目标是ul（className ==" todoli"）

var todosUl = document.getElementsByClassName("todo")[0];
todosUl.addEventListener('mouseover', function(event) {
  let eOver = event.target;
  if(eOver.className == 'todo') {
  //for the ul
    console.log("I'm handeled from " + eOver.className);
  } else if (eOver.className == 'item') {
  //for the li
    console.log("I'm handeled from " + eOver.className);
  }
});
todosUl.addEventListener('mouseout', function(event) {
  let eOver = event.target;
  if(eOver.className == 'todo') {
  //for the ul
    console.log("I'm handeled from " + eOver.className);
  } else if (eOver.className == 'item') {
  //for the li
   console.log("I'm handeled from " + eOver.className);
  }
});

ul{
  padding: 15px;
  background: lightblue;
}
li{ 
  background: grey;
  padding: 5px 5px;
  }

<ul class="todo">
  <li class="item">Do it!!</li>
</ul>

Answer 2

这里的问题在于条件语句。只需修改您的条件语句以包含button元素，它应该起作用。

todosUl.addEventListener('mouseover', function(event) {
  let elementMousedOver = event.target;
  if(elementMousedOver.className == 'todoLi' || 
    elementMousedOver.tagName === "BUTTON") {
    elementMousedOver.lastElementChild.style.display = 'inline';
  }
});