使附加的子项也触发父元素

时间:2017-11-25 23:31:54

标签: javascript

我在应用中为每个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元素,但是当我将鼠标移到按钮上时,它们是li元素的子元素,如果这些子元素毕竟不是li元素的子元素,则事件侦听器因某种原因停止工作。 / p>

如何让追加的子节点也触发其父事件侦听器?

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

repo with files:https://github.com/mikestepanov/mikestepanov.github.io

2 个答案:

答案 0 :(得分:0)

默认情况下,事件冒充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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这里的问题在于条件陈述。只需修改条件语句以包含button元素,它就可以工作。

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