Родитель может изменить цвет при нажатии, но ребенок не может - PullRequest
Новая
       13

Родитель может изменить цвет при нажатии, но ребенок не может

1 голос
/ 14 мая 2019

Каждый - это div, нажав.Нажатие на parent и parent2 может изменить цвет (), но нажатие на child-div (some_id1, some_id2) не может изменить цвет.Как этого избежать, нужно щелкнуть по каждому элементу div и изменить этот цвет?Конечно, позже я бы добавил больше div. 

<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>

Ответы [ 2 ]

1 голос
/ 20 мая 2019

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

0 голосов
/ 14 мая 2019

Очень интересный вопрос. Это может быть объяснено тем фактом, что в действии всегда выбирается родительский элемент, если мы редактируем ваш код для использования тега раздела, мы видим, что нижний раздел щелкается и может быть изменен, но два верхних дочерних элемента элементы никогда не изменяются и не регистрируются как нажатые, потому что родитель имеет значение. 

<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>
...