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

【问题标题】：Javascript - cloned element not responding to clickJavascript - 克隆的元素不响应点击
【发布时间】：2018-12-18 18:57:04
【问题描述】：

我克隆元素时遇到问题，该元素不响应 onclick。我想删除该元素和其他克隆元素的“选定”类。我仍然可以在原始元素上添加和删除该类，但不能在克隆的元素上添加和删除该类。当您按“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';
});

问候

【问题讨论】：

阅读the docs：“[cloneNode] 不会复制使用 addEventListener() 添加的事件侦听器”
我没有看到任何 onclick 事件监听器被添加
我猜事件监听器没有附加到克隆的元素上。如果您使用的是 jquery，您将利用事件委托，即使在初始化侦听器之后，它也会将侦听器附加到新创建的对象。在克隆时删除所有侦听器怎么样（以免在预先存在的元素上有重复的侦听器），然后立即将它们添加到所有元素？
@LexJacobs 你也可以使用 vanilla JS 委托事件。

标签： javascript object event-handling clone element

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：