Javascript 单击块时，如何不计算子块（例如，child span）？

单击块时，如何不计算子块（例如

.child span

）

如果您单击块

.child

就可以了。但是，如果您的单击击中块

.child span

，则会出现错误

var parent=document.querySelector（'.parent'）；
var childLength=document.querySelectorAll（'.child'）.length；
var countClick=0；
parent.onclick=函数（事件）{
var target=event.target；
如果（target.className=='child'）{
target.className='子单击'；
setTimeout（函数（）{
target.className='child-hide'；
}, 3000);
}
console.log（countClick）；
countClick++；
if（childLength==countClick）{
setTimeout（函数（）{
parent.innerHTML='好的'；
}, 3000);
}
}

.parent{
显示器：flex；
}
.孩子{
填充：15px；
背景：#ccc；
利润率：10px；
}
.儿童点击{
背景：#f00；
}
.儿童皮{
显示：无；
}

1.
2.
3.
4.

获取最近的元素，该元素有一个

.child

类，类似于：

var parent=document.querySelector（'.parent'）；
var childLength=document.querySelectorAll（'.child'）.length；
var countClick=0；
parent.onclick=函数（事件）{
如果（event.target==父级）{
log（“返回原因是它是父项”）；
返回；
}
var target=event.target.closest（'.child'）；
如果（target.className=='child'）{
target.className='子单击'；
setTimeout（函数（）{
target.className='child-hide'；
}, 3000);
}
console.log（countClick）；
countClick++；
if（childLength==countClick）{
setTimeout（函数（）{
parent.innerHTML='好的'；
}, 3000);
}
}

.parent{
显示器：flex；
}
.孩子{
填充：15px；
背景：#ccc；
利润率：10px；
}
.儿童点击{
背景：#f00；
}
.儿童皮{
显示：无；
}

1.
2.
3.
4.

获取最近的元素，该元素有一个

.child

类，类似于：

var parent=document.querySelector（'.parent'）；
var childLength=document.querySelectorAll（'.child'）.length；
var countClick=0；
parent.onclick=函数（事件）{
如果（event.target==父级）{
log（“返回原因是它是父项”）；
返回；
}
var target=event.target.closest（'.child'）；
如果（target.className=='child'）{
target.className='子单击'；
setTimeout（函数（）{
target.className='child-hide'；
}, 3000);
}
console.log（countClick）；
countClick++；
if（childLength==countClick）{
setTimeout（函数（）{
parent.innerHTML='好的'；
}, 3000);
}
}

.parent{
显示器：flex；
}
.孩子{
填充：15px；
背景：#ccc；
利润率：10px；
}
.儿童点击{
背景：#f00；
}
.儿童皮{
显示：无；
}

1.
2.
3.
4.

您可以检查目标是否为

span

。如果目标是

span

将目标更改为其父目标：

var parent=document.querySelector（'.parent'）；
var childLength=document.querySelectorAll（'.child'）.length；
var countClick=0；
parent.onclick=函数（事件）{
var target=event.target；
target=target.nodeName=='SPAN'？target.parentNode:target；
如果（target.className=='child'）{
target.className='子单击'；
setTimeout（函数（）{
target.className='child-hide'；
}, 3000);
}
console.log（countClick）；
countClick++；
if（childLength==countClick）{
setTimeout（函数（）{
parent.innerHTML='好的'；
}, 3000);
}
}

.parent{
显示器：flex；
}
.孩子{
填充：15px；
背景：#ccc；
利润率：10px；
}
.儿童点击{
背景：#f00；
}
.儿童皮{
显示：无；
}

1.
2.
3.
4.

您可以检查目标是否为

span

。如果目标是

span

将目标更改为其父目标：

var parent=document.querySelector（'.parent'）；
var childLength=document.querySelectorAll（'.child'）.length；
var countClick=0；
parent.onclick=函数（事件）{
var target=event.target；
target=target.nodeName=='SPAN'？target.parentNode:target；
如果（target.className=='child'）{
target.className='子单击'；
setTimeout（函数（）{
target.className='child-hide'；
}, 3000);
}
console.log（countClick）；
countClick++；
if（childLength==countClick）{
setTimeout（函数（）{
parent.innerHTML='好的'；
}, 3000);
}
}

.parent{
显示器：flex；
}
.孩子{
填充：15px；
背景：#ccc；
利润率：10px；
}
.儿童点击{
背景：#f00；
}
.儿童皮{
显示：无；
}

1.
2.
3.
4.

谢谢。问题是：如果在块之间单击，如何不计算单击次数？@ivansimonov007我已经更新了答案。特别是查看选项2！你会喜欢的。非常感谢。谢谢。问题是：如果在块之间单击，如何不计算单击次数？@ivansimonov007我已经更新了答案。特别是查看选项2！您会喜欢的。非常感谢您可以将目标更改为指向正确的元素，而不是重复这么多相同的代码。您可以将目标更改为指向正确的元素，而不是重复这么多相同的代码。

var target = event.target.closest('.child');