这是我正在使用的标记
<div class="checkout-row__form-column__billing">
<div class="checkout-row__form-column__billing__title billing-collapse collapse-btn">
<div class="checkout-row__form-column__billing__title__arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h2>1. Billing Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>
<div class="checkout-row__form-column__shipping">
<div class="checkout-row__form-column__shipping__title shipping-collapse collapse-btn">
<div class="checkout-row__form-column__shipping__title__arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<h2>2. Shipping Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>
所有这些标记都用封装div了checkout-row__form-column。因此，我要抓住父包装器，点击“我将目标与匹配” .collapse-btn。然后我对同级的同级进行切换.collapse-target。除了在问题上我无法超越之外，效果很好。如果单击内部元素，则不会发生该事件。
这是我的js
parent = document.querySelector('.checkout-row__form-column');
parent.addEventListener('click', (e)=>{
if (e.target.matches('.collapse-btn')) {
e.stopPropagation();
e.target.nextElementSibling.classList.toggle('hide');
}
});
使用这些代码，如果我不单击ielement或，就可以切换类h2。我该如何编写JavaScript，如果我单击内的任意位置，将会触发该事件e.target。
任何帮助都是同志们的赞赏。
您的代码仅检查元素是否event.target为.collapse-btn。您还需要检查clicked元素是否是该元素的后代.collapse-btn元素。
为获得所需的结果，可以使用两个条件来检查theevent.target是.collapse-btn其后代还是任意后代。要检查后代元素，请使用通用选择器*。
parent.addEventListener('click', (e) => {
if (
e.target.matches('.collapse-btn') ||
e.target.matches('.collapse-btn *')
) {
// code
}
});
以下代码段显示了一个示例：
const parent = document.querySelector('.container');
parent.addEventListener('click', e => {
if (
e.target.matches('.collapse-btn') ||
e.target.matches('.collapse-btn *')
) {
parent.classList.toggle('active');
}
});.container {
background: #eee;
width: 120px;
height: 120px;
}
.container.active {
border: 2px solid;
}
.collapse-btn {
background: #999;
padding: 10px;
}
.collapse-btn span {
background: #fc3;
font-size: 1.3rem;
cursor: pointer;
}<div class="container">
<div class="collapse-btn">
<span>Click</span>
</div>
</div>您也可以将选择器放入数组中，然后使用.some()方法检查是否event.target与数组中的选择器匹配。
const selectors = ['.collapse-btn', '.collapse-btn *'];
parent.addEventListener('click', e => {
if (selectors.some(s => e.target.matches(s))) {
// code
}
});
以下代码段显示了一个示例：
const parent = document.querySelector('.container');
parent.addEventListener('click', e => {
const selectors = ['.collapse-btn', '.collapse-btn *'];
if (selectors.some(s => e.target.matches(s))) {
parent.classList.toggle('active');
}
});.container {
background: #eee;
width: 120px;
height: 120px;
}
.container.active {
border: 2px solid;
}
.collapse-btn {
background: #999;
padding: 10px;
}
.collapse-btn span {
background: #fc3;
font-size: 1.3rem;
cursor: pointer;
}<div class="container">
<div class="collapse-btn">
<span>Click</span>
</div>
</div>而不是使用的.matches()方法，使用的组合Element.closest()和Node.contains()方法，以检查是否event.target是.collapse-btn元素或者是一个子元素.collapse-btn的元素。
为此，您需要执行两个步骤：
您首先需要获取，.collapse-btn它是的最接近的祖先event.target。
之后，您需要检查是否event.target是在步骤1中选择的按钮的后代。
码：
parent.addEventListener('click', (e) => {
const targetCollapseBtn = e.target.closest('.collapse-btn');
if (targetCollapseBtn && targetCollapseBtn.contains(e.target)) {
...
}
});
如果event.target是.collapse-btn自己的话
e.target.closest('.collpase-btn')
将返回e.target，即.collapse-btn和
targetCollapseBtn.contains(e.target)
也会返回true，因为.contains()即使作为参数传递给它的节点与.contains()调用方法的节点相同，该方法也返回true 。
因此.closest()，.contains()以这种方式使用和方法涵盖了两个用例，即何时.collapse-btn单击或何时单击其任何后代元素。
以下代码段显示了一个简单的示例：
const parent = document.querySelector('.container');
parent.addEventListener('click', e => {
const targetCollapseBtn = e.target.closest('.collapse-btn');
if (targetCollapseBtn && targetCollapseBtn.contains(e.target)) {
parent.classList.toggle('active');
}
});.container {
background: #eee;
width: 120px;
height: 120px;
}
.container.active {
border: 2px solid;
}
.collapse-btn {
background: #999;
padding: 10px;
}
.collapse-btn span {
background: #fc3;
font-size: 1.3rem;
cursor: pointer;
}<div class="container">
<div class="collapse-btn">
<span>Click</span>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句