javascript - 单击父级时如何不解雇其子级？ (普通 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

__________最终编辑结束___________

所以我只想在单击父项时仅在父项上触发。下面的代码，它在父级及其所有子级上触发。我怎样才能防止这种情况发生？我尝试在之前和之后进行停止/预防，看看我是否有运气。

请指教。

• 当点击父级时，只有父级应该获得“红色”类别。 (并不是是 child )。
• 当点击任何子级时，父级或任何其他子级都不应该是红色的没有人点击子项(已经在工作)。

        <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

• when click on parent, only parent should get class "red". (and not it's children).

这里的问题是您的 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>

children 变成红色的事实与事件无关。 child 根据 parent 的 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>

• When any child is clicked, no parent should be red nor any other none clicked child

这是一个不同的问题。当您单击任何子项时，将触发事件监听器。 e.target 将是实际被单击的元素，因此如果您单击一个子元素，它将是该子元素

解决此问题的一种方法是检查目标是否为父级。

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

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