我克隆了一个元素时会有问题,该元素不会响应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
。