Javascript 在click handler中使用重叠“获取错误的元素”；圈；divs

我正在尝试使用单击处理程序动态添加HTML元素。当点击处理程序被激活时，它指向错误的元素（它总是指向外圈）。问题出在哪里

（函数（）{
//选择器，jQuery样式
var$=函数（选择器）{
返回单据查询选择器（选择器）；
}
//求圆的数量
变量数量=$（'.circles'）.getAttribute（'quantity'）；
//设置圆的外部宽度/高度
$（'.circles'）.style.width=（数量*50）+4+'px'；
$（'.circles'）.style.height=（数量*50）+4+'px'；
//创建子元素
var childCircle=document.createElement（'div'）；
childCircle.className='subCircle'；
//儿童点击功能
函数onClick（）{
this.attributes.style.value+='边框颜色：红色；'
警惕（此为clientHeight）；
}
//附加子圆
对于（变量i=0；i
.circles{
位置：绝对位置；
}
.次圆{
位置：绝对位置；
边界半径：50%；
转化：translateX（-50%）translateY（-50%）；
边框：2件纯黑；
最高：50%；
左：50%；
}
问题不在于此

，它实际上是由事件回调机制设置的。你最大的圆圈在上面

更改设置大小的循环可以将较小的圆放在顶部：

for (var i = 0; i < subCircle.length; i++) {
  subCircle[i].onclick = onClick;
  subCircle[i].style.width = ((subCircle.length - i) * 50) + 'px';
  subCircle[i].style.height = ((subCircle.length - i) * 50) + 'px';
}

而不是

this.attributes.style.value += 'border-color: red;'

例如：

（函数（）{
//选择器，jQuery样式
var$=函数（选择器）{
返回单据查询选择器（选择器）；
}
//求圆的数量
变量数量=$（'.circles'）.getAttribute（'quantity'）；
//设置圆的外部宽度/高度
$（'.circles'）.style.width=（数量*50）+4+'px'；
$（'.circles'）.style.height=（数量*50）+4+'px'；
//创建子元素
var childCircle=document.createElement（'div'）；
childCircle.className='subCircle'；
//儿童点击功能
函数onClick（）{
this.style.borderColor='red'；
警惕（此为clientHeight）；
}
//附加子圆
对于（变量i=0；i
.circles{
位置：绝对位置；
}
.次圆{
位置：绝对位置；
边界半径：50%；
转化：translateX（-50%）translateY（-50%）；
边框：2件纯黑；
最高：50%；
左：50%；
}
问题不在于此

，它实际上是由事件回调机制设置的。你最大的圆圈在上面

更改设置大小的循环可以将较小的圆放在顶部：

for (var i = 0; i < subCircle.length; i++) {
  subCircle[i].onclick = onClick;
  subCircle[i].style.width = ((subCircle.length - i) * 50) + 'px';
  subCircle[i].style.height = ((subCircle.length - i) * 50) + 'px';
}

而不是

this.attributes.style.value += 'border-color: red;'

例如：

（函数（）{
//选择器，jQuery样式
var$=函数（选择器）{
返回单据查询选择器（选择器）；
}
//求圆的数量
变量数量=$（'.circles'）.getAttribute（'quantity'）；
//设置圆的外部宽度/高度
$（'.circles'）.style.width=（数量*50）+4+'px'；
$（'.circles'）.style.height=（数量*50）+4+'px'；
//创建子元素
var childCircle=document.createElement（'div'）；
childCircle.className='subCircle'；
//儿童点击功能
函数onClick（）{
this.style.borderColor='red'；
警惕（此为clientHeight）；
}
//附加子圆
对于（变量i=0；i
.circles{
位置：绝对位置；
}
.次圆{
位置：绝对位置；
边界半径：50%；
转化：translateX（-50%）translateY（-50%）；
边框：2件纯黑；
最高：50%；
左：50%；
}
只需为每个圆添加z索引属性即可

subCircle[i].style['z-index'] = subCircle.length-i;

实际上，较大的圆与所有内圈重叠。
只需为每个圆添加z索引属性即可

subCircle[i].style['z-index'] = subCircle.length-i;

实际上，较大的圆与所有内圈重叠。
子圆[i]。onclick=onclick
，您在那里丢失了这个
。非点，非
此
。使事件侦听器像
函数（e）{e.target.attributes.style.value+='边框颜色：红色；'}
问题不在于
此
，而在于如何定位元素。最大的圆位于所有其他圆的顶部，因此它接收所有指针事件。但是颠倒顺序并没有多大帮助，因为元素仍然重叠。@supercolhandsomegelboy:那是错误的<代码>除非明确设置，否则此
永远不会引用函数本身<代码>这不是应该避免的不可预测的变量，而是应该理解的变量。在上面的例子中，它的值是非常清楚的