Javascript - клонированный элемент не отвечает на нажатие - PullRequest
Новая
       19

Javascript - клонированный элемент не отвечает на нажатие

0 голосов
/ 18 декабря 2018

У меня проблема, когда я клонировал элемент, этот элемент не реагирует на нажатие кнопки мыши.Я хочу удалить класс selected для этого элемента и другого клонированного элемента.Я все еще могу добавить и удалить этот класс в исходном элементе, но не в клонированном.Когда вы нажимаете 't', вы клонируете выбранный объект (ы).Их, в свою очередь, следует выбирать и не выбирать при щелчке мышью.

Я знаю, что есть некоторые подобные вопросы, но все они используют jquery, в котором я не заинтересован, помогая.

У меня есть скрипка со всем кодом здесь: http://jsfiddle.net/oveht2zr/

HTML: 

<!doctype html>
    <html>
    <head>
        <title>Sandbox</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body id="content">
        <h1>My Sandbox</h1>

        <div id="box1" class="box">
        </div>

        <script src="js/main.js"></script>
    </body>
</html>

Затронутый JS: 

let myContent = document.querySelector('#content');
let box = document.querySelector('.box');

let z = 2;

function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        myContent.appendChild(clone);
        z++;            
    }
}

document.addEventListener('keydown', function(event) {
    let key = event.key;

    switch(key) {
        case 'e':
            circle();
            break;
        case 'q':
            resizeUp();
            break;
        case 'w':
            resizeDown();
            break;
        case 'r':
            changeColor();
            break;
        case 't':
            cloneSelected();
            break;
    }

    box.style.top = (browserHeight / 2) - (boxHeight / 2) + 'px';
    box.style.left = (browserWidth / 2) - (boxWidth / 2) + 'px';
});

С уважением

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

В вашей функции cloneSelected вы должны подписать клон на клик 

function cloneSelected() {
    let all = document.querySelectorAll('.selected');
    let i;

    for (i = 0; i < all.length; i++) {
        let clone = all[i].cloneNode(true);
        clone.style.top = Math.floor(Math.random() * browserHeight) + 'px';
        clone.style.left = Math.floor(Math.random() * browserWidth) + 'px';
        clone.setAttribute('id', 'box' + z);
        clone.style.zIndex = z;
        clone.addEventListener('click', function(event) {
            if (clone.classList.contains('selected')) {
                event.target.classList.remove('selected');
            } else {
                event.target.classList.add('selected');
            }})
        myContent.appendChild(clone);
        z++;            
    }
}
0 голосов
/ 18 декабря 2018

Вы добавляете eventListener к переменной с именем box, которую вы устанавливаете в верхней части своей функции.В то время, когда вы устанавливаете эту переменную, ваш клонированный ящик не существует, поэтому он не включен в querySelectorAll, который создает переменную box, и поэтому не получает eventListener.

IЯ не изучил ваш код очень подробно, но я думаю, вы могли бы просто переустановить box в функции cloneSelected после вашего myContent.appendChild.

...