Parent 可以点击改变颜色，但是 child 不能

Question

每一个都是点击div。点击parent和parent2可以改变颜色（），但是点击child-div（some_id1、some_id2）不能改变颜色。如何避免这种情况，应该单击每个 div 并且可以更改该颜色？当然后面我会添加更多divs.

<style> 
#some_id1{
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}

#some_id2{
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}

#parent{
width: 150px;
height: 150px;
margin: 10px;
padding: 10px;
background-color: blue;
}

#parent2{
width: 150px;
height: 150px;
margin: 10px;
padding: 10px;
background-color: blue;
}
</style>
</head>
<body>

<input type="color" id="divbackgroundcolor" onchange="ColorChange()">

<div class="some_style" id="parent">
     <div class="some_style" id="some_id1"></div>
     <div class="some_style" id="some_id2"></div>
</div>

<div class="some_style" id="parent2"></div>

<script>
var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id
    };
} 

function ColorChange(){
        var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = x;
}        
</script>

Answer 1

一个很有趣的问题。这可以通过以下事实来解释：父级始终是在操作中被单击的那个，如果我们编辑您的代码以使用部分标记，我们可以看到底部部分被单击并且可以更改，但顶部的两个子级项目永远不会更改或注册为被点击，因为父项是。

<style> 
    #some_id1{
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
    }

    #some_id2{
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
    }

    #parent{
    width: 150px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    background-color: blue;
    }

    #parent2{
    width: 150px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    background-color: blue;
    }
    </style>
</head>
<body>

<input type="color" id="divbackgroundcolor" onchange="ColorChange()">

<div  class="some_style" id="parent">
     <section class="some_style" id="some_id1"></section>
     <section class="some_style" id="some_id2"></section>
</div >

<section  class="some_style" id="parent2"></section >

<script>
var div = document.getElementsByTagName("section");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id
    };
} 

function ColorChange(){
        var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = x;
}        
</script>

Answer 2

y.addEventListener('click', 函数 (e) { event.stopPropagation(); clickedDivId = this.id;

Parent 可以点击改变颜色，但是 child 不能

Parent can change color on click, but the child can not

click

parent-child