JavaScript-克隆元素未响应点击



我克隆了一个元素时会有问题,该元素不会响应onclick。我想删除该元素和其他克隆元素的"选择"类。我仍然可以在原始元素上添加并删除该类,而不是克隆的元素。按下" T"时,您将克隆选定的对象。反过来,应在Mouseclick上选择并未选择它们。

我知道那里有一些类似的问题,但他们都使用了我对

的帮助不感兴趣的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';
});

问候

在您的克隆功能中,您应该订阅Clone to Click

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++;            
    }
}

您将eventListener添加到称为box的变量,您将其设置在功能的顶部。在您设置此变量时,克隆框不存在,因此它不包含在创建box变量的querySelectorAll中,因此未获取eventListener

我尚未详细检查您的代码,但是我想您可以在myContent.appendChild之后仅在cloneSelected功能中重新设置box

相关内容

  • 没有找到相关文章

最新更新