Блог

Используя только JavaScript, я хочу создать пять вложенных разделов. При нажатии на один из них я хочу, чтобы только фон этого div менял свой цвет (в соответствии с массивом цветов).

Моя проблема здесь в том, что, поскольку divs вложены, нажатие на любой из них просто окрасит самый большой (родительский). Остальная часть кода в порядке, потому что, если я изо всех сил нажимаю на границу, я действительно могу добиться того, чего хочу. Но идея заключается в том, чтобы работать при нажатии внутри меньшего div.

 var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i  ) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10   20)}px`
    currentDiv.style.height = `${(i * 10   20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i  ) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}
  

К каждому циклу добавляется элемент DIV, больший, чем его родительский элемент. Это означает, что можно щелкнуть только по последнему div, потому что он охватывает остальные.

Если изменить логику изменения размера, чтобы с каждым циклом DIVS становились все меньше, код будет работать так, как вы ожидаете.

Используйте event.stopPropagation(); , чтобы предотвратить передачу события другим элементам.

 var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i  ) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(60 - i * 10)}px`
    currentDiv.style.height = `${(60 - i * 10)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i  ) {
    divArray[i].onclick = function(e) {
        e.stopPropagation();
        this.style.backgroundColor = colors [this.position]
    } 
}  

 div {
  outline: 1px solid orange;
  background: #FFF;
}  

Вам нужно остановить распространение события в onclick событии, вот так

 divArray[i].onclick = function(event) {
  event.stopPropagation();
  this.style.backgroundColor = colors [this.position]
}
  

Существует также preventDefault, чтобы предотвратить поведение по умолчанию, например, ссылку или кнопку формы.

 var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i  ) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10   20)}px`
    currentDiv.style.height = `${(i * 10   20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i  ) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}  

 div{
  border: 1px solid #000;
}