[最终编辑：当我从这篇文章中学到很多东西时，我感到很乐于回应（主要是通过你们，并且我花了更多的时间来理解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);
})()
答案 0 :(得分：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);
答案 1 :(得分：0)
有几种方法可以实现这一目标-一种方法是检查事件对象上id的{{1}}属性以供用户单击操作：
currentTargetconst 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;
}
答案 2 :(得分：0)
您可以在处理程序内部检查触发事件的元素（ 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
答案 3 :(得分：0)
您需要停止在孩子身上传播
<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>