父母被点击时如何不解雇孩子？ （香草javascript）

Question

[最终编辑：当我从这篇文章中学到很多东西时，我感到很乐于回应（主要是通过你们，并且我花了更多的时间来理解CSS ..但是最后，我真的不知道如何使这项工作..除了真正破坏html ..的基本结构外，我不想做。但是我做了...（由于任何原因，＃parent> * {color：black}在我工作时都无法工作点击孩子）。

这就是我所做的，但是如果您现在知道我想做的事情..请查看您是否可以用真实答案纠正我，因为我觉得这不可能是让它继续前进的黑客。

CSS

.red {
    color: red;
}

div[id*="child"] {
    color: black;
}

div [id*="alterChild"]{
    color: green;

JS

;(function(){

    let parentId = document.getElementById('parent');

    parentId.addEventListener('click', function(e){
        if (e.target.id === 'parent') {
            e.target.className = "red";
        } else {
            e.target.setAttribute("id", "alterChild");
        }
    },false);
})(

HTML

<div id="main">MAIN
    <div id="parent">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
    </div>
</div

__________最终编辑结束_____________

因此，我只想在单击父级时在父级上触发。在代码下面，它在父级及其所有子级上触发。我该如何预防？我尝试在停止之前和之后都进行停止/预防动作，以查看是否有运气。

请告知。

• 单击父级时，只有父级应获得“红色”类。 （并不是 是孩子）。
• 单击任何孩子时，任何父项都不得为红色，也不得其他 没有点击的孩子（已经在工作）。

        <div id="main">MAIN
            <div id="parent">parent
                <div id="child1">child1</div>
                <div id="child2">child2</div>
                <div id="child3">child3</div>
            </div>
        </div>

      ;(function(){

        let parentId = document.getElementById('parent');

        parentId.addEventListener('click', function(e){
            e.stopPropagation();
            e.preventDefault();
            e.target.className = "red";
            e.stopPropagation();
            e.preventDefault();

        },false);
    })()

Answer 1

  

  
• 单击父级时，只有父级应获得“红色”类。 （不是孩子）。
  

这里的问题是您的CSS样式适用于孩子。 CSS代表层叠样式表，其中“层叠”表示“适用于儿童”

单击父项后，您将得到此

.red {
  color: red;
}

<div id="main">MAIN
    <div id="parent" class="red">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
    </div>
</div>

孩子变成红色的事实与事件无关。孩子根据父母的CSS进行更改是正常的

如果您希望孩子不继承其父母的颜色，则需要明确设置他们的颜色

.red {
  color: red;
}
#parent>* {  
  color: black;
}

/* these would also work

    div[id^=child]  
    #child1, #child2, #child3
    #parent>div

*/

<div id="main">MAIN
    <div id="parent" class="red">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
    </div>
</div>

示例：

;
(function() {

  const parentId = document.getElementById('parent');

  parentId.addEventListener('click', function(e) {
    e.target.className = "red";
  }, false);
})()

.red {
  color: red;
}
#parent>* {
  color: black;
}

<div id="main">MAIN
  <div id="parent">parent
    <div id="child1">child1</div>
    <div id="child2">child2</div>
    <div id="child3">child3</div>
  </div>
</div>

  

  
• 点击任何一个孩子时，任何父母都不应该是红色的，也不要点击任何其他孩子
  

这是一个不同的问题。当您单击任何子级时，将触发事件侦听器。 e.target将是实际被单击的元素，因此，如果您单击了一个孩子，则将是那个孩子

解决此问题的一种方法是检查目标对象是父对象。

      const parentId = document.getElementById('parent');

      parentId.addEventListener('click', function(e) {
        if (e.target === parentId) {
          e.target.className = "red";
        }
      }, false);

Answer 2

有几种方法可以实现这一目标-一种方法是检查事件对象上id的{​​{1}}属性以供用户单击操作：

currentTarget

const div1 = document.createElement('div');
div1.className = 'foo';

let mainId = document.getElementById('main');
let parentId = document.getElementById('parent');

parentId.addEventListener('click', function(e) {

  /* Check the id of the currentTarget element to see if it's the "parent" */
  if (e.currentTarget.id === 'parent') {

    /* .. and if so, assing the "red" class */
    e.target.className = "red";
  } else {

    /* ..otherwise, stop event propagation and behaviour */
    e.stopPropagation();
    e.preventDefault();
  }

}, false);

.red {
  background: red;
}

#parent {
  padding: 1rem;
}

#child1,
#child2,
#child3 {
  background: yellow;
}

Answer 3

您可以在处理程序内部检查触发事件的元素（ target ）是否是处理程序绑定到的元素（this：

parentId.addEventListener('click', function(e){
  if (e.target === this) {
    e.target.className = "red";
  }
}, false);

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Answer 4

您需要停止在孩子身上传播

<html>

  <head></head>

  <body>
    <div id="main">MAIN
      <div id="parent">parent
        <div id="child1">child1</div>
        <div id="child2">child2</div>
        <div id="child3">child3</div>
      </div>
    </div>
    <script>
      (function() {
        let parent = document.getElementById('parent');
        parent.addEventListener('click', function(e) {
          console.log('parent clicked');
        }, false);
        const children = document.querySelectorAll('#parent>div');
        children.forEach(child => {
          child.addEventListener('click', function(e) {
            console.log('child clicked');
            e.stopPropagation();
          })
        })
      })()

    </script>
  </body>

</html>

https://jsfiddle.net/1xnow7jz/