Javascript

Question

我在克隆元素时遇到问题，该元素不响应 onclick。我想删除该元素和其他克隆元素的 class 'selected'。我仍然可以在原始元素上添加和删除 class，但不能在克隆元素上添加和删除。当您按 't' 时，您将克隆选定的对象。它们又应该在鼠标点击时被选中和取消选中。

我知道那里有一些类似的问题，但他们都使用 jquery，我对此不感兴趣或得到了帮助。

我有一个 fiddle，这里有完整的代码：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';
});

此致

Answer 1

您正在将 eventListener 添加到一个名为 box 的变量中，该变量是您在函数顶部设置的。在您设置此变量时，您的克隆框不存在，因此它不包含在创建 box 变量的 querySelectorAll 中，因此不会获得 eventListener。

我没有详细检查您的代码，但我想您可以在 myContent.appendChild 之后的 cloneSelected 函数中简单地重新设置 box。

Answer 2

在您的 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++;            
    }
}

Javascript - 克隆的元素不响应点击

Javascript - cloned element not responding to click

clone

element

object

event-handling