从任何操作中禁用span

Question

我的项目有一个问题。我为hangman游戏创造了键盘之类的东西。在点击的情况下，我需要有禁用跨度为那封信，如果用户选择错误的字母，刽子手的形象应该改变。但是当我点击任何按钮时它看起来都是禁用的因为我改变了

的颜色

. clickedLetter{
background-color :....
opacity:.1;
pointer-events: none;
}

但是字母仍然是可点击的，当你点击禁用字母(span)时，刽子手的图像将会改变。

我想添加一些东西来阻止任何动作

这是我的代码:

document.addEventListener("click", (e) => {
if(e.target.className ==='boxForLetter')
{ e.target.classList.add("clickedLetter");}
let clickedLetter= e.target.innerHTML;

.......

…

…

.

感谢大家对这个问题的看法

Answer 1

问题出在你的if语句中。

你需要在if语句下面运行代码。如果你在委托的点击处理程序的If语句下面运行hangman代码，任何点击都会触发hangman代码。另外，我建议检查classlist是否包含一个类，而不是检查类名是否等于什么。这是更现代的，并允许在对象上有更多的类。

if(e.target.classList.contains('boxForLetter'))    
{
//run hangman code here
e.target.classList.add("clickedLetter");
let clickedLetter= e.target.innerHTML;
}

Answer 2

如果我对问题的理解正确的话，您希望在已经单击的情况下删除单击事件。实际上可以使用禁用事件触发器的pointer-events: none来完成。

document.addEventListener("click", (e) => {
if (e.target.className === 'boxForLetter') {
e.target.classList.add("clickedLetter");
}
let clickedLetter = e.target.innerHTML;
});

.boxForLetter {
display: inline-block;
background-color: black;
width: 50px;
height: 50px;
cursor: pointer;
margin-right: 10px;
}
.boxForLetter.clickedLetter {
background-color: red;
opacity: 1;
pointer-events: none;
}

<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>
<div class="boxForLetter">
</div>