单击子项时附加事件不起作用

Question

我有一些动态添加的元素。我想在特定类上附加"单击"事件。但问题是，如果我点击子元素，它就不起作用了。这是我动态添加的元素。

<div id="steps">    
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>

这是我的javascript代码：

document.body.addEventListener('click', function (evt) {
if ( evt.target.classList.contains("step-del") ) {
alert(this)
}
}, false);

Answer 1

evt.target是您单击的内容。您正在单击子项，因此它不会触发父项。因此，您需要查看单击的内容是该元素还是该元素的子元素。你可以用.closest()做到这一点

const stepDelElem = evt.target.closest(".step-del");
if (stepDelElem) {
console.log('here');
}

Answer 2

<svg>与普通HTML标签不同。一个简单的解决方案是通过在CSS中添加以下内容来防止任何鼠标事件与<svg>交互：

svg {
pointer-events: none
}

其他变化只是建议。

document.getElementById('steps').addEventListener('click', function(evt) {
if (evt.target.matches(".step-del")) {
console.log(evt.target.className);
}
}, false);

a {
display: inline-block;
width: max-content;
border: 1px solid red
}
svg {
pointer-events: none
}

<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
1
</a>
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
2
</a>
</div>
</div>

Answer 3

也许目标是"步骤del"；，所以你需要检查closest，如果它们中的任何一个具有"0"，它将搜索父元素；步骤del"；班

document.body.addEventListener('click', function (evt) {
const del = evt.target.closest(".step-del")
if (del) {
alert(del)
}
}, false);

<div id="steps">    
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>