一种使用 Javascript 取消单击已单击按钮的方法答案

【问题标题】：A way to unclick a button that has been clicked using Javascript一种使用 Javascript 取消单击已单击按钮的方法
【发布时间】：2015-08-14 10:19:20
【问题描述】：

有没有办法取消选择或取消单击已使用 javascript 单击的按钮？

所以基本上我有一个按钮：

if (i === 10) {
        var clicked = document.getElementById('i10');
        clickedButton.push(click.textContent);
        clicked.style.color = "pink";
}

因此，当我单击该按钮时，它会将文本变为粉红色。有没有办法再次单击按钮并让它删除推送并将文本变回黑色？

抱歉，Javascript 不是我的强项。

【问题讨论】：

取消点击是什么意思？单击按钮后，它不会保持状态，除非您设置某种标志。你的意思是解绑点击事件吗？
@PatrickEvans 也许会有所帮助。在我的情况下，我单击更改文本的按钮。现在我想取消单击它在开始时删除该单击的按钮。这有意义吗？
你能分享代码示例来解释你在找什么吗？再次单击同一个按钮时，是否要放回原始文本？
如果你能解释一下你有什么和你想要什么会更好
您确实需要将所有这些解释放入您的帖子中，并消除所有猜测。您还应该分享到目前为止更改按钮状态的代码。

标签： javascript events button

【解决方案1】：

是的：

if (i === 10) {
  var clicked = document.getElementById('i10');
  var index = clickedButton.indexOf(click.textContent);
  if (index === -1) {
    // toggle on
    clickedButton.push(click.textContent);
    clicked.style.color = "pink";
  } else {
    // toggle off
    clickedButton.splice(index, 1);
    clicked.style.color = "";
  }
}

这将检查click.textContent 是否已经在 clickedButton 数组中。如果是，它将从该数组中删除它，并将按钮颜色重置为默认值。

请注意，IE7-8 不支持使用indexOf 搜索数组。如果您需要对这些浏览器的支持，您也需要实现此功能：

if (!('indexOf' in Array.prototype)) {
    Array.prototype.indexOf= function(find, i /*opt*/) {
        if (i===undefined) i= 0;
        if (i<0) i+= this.length;
        if (i<0) i= 0;
        for (var n= this.length; i<n; i++)
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}

以上内容取自 StackOverflow 线程：Fixing JavaScript Array functions in Internet Explorer (indexOf, forEach, etc.)。

【讨论】：

这适用于着色.. 有没有办法取消在单击按钮时一开始推送的 textContent？
我花了两天时间假设这是可能的。可能不会。让我们希望这条评论能成为话题。

【解决方案2】：

Web 编程课时：如果要设置样式，不要使用 JavaScript 设置样式，使用 CSS 进行样式定义，然后只使用 JavaScript 指向那个 CSS。

在您的 CSS 中：

.highlight {
  color: pink;
  background: blue;
  font-style: fantasy;
  whatever-else: StuffGoesHere;
}

然后你的按钮处理：

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  e.classList.toggle("highlight");
});

魔术：只要以正确的方式做事，代码就非常简单，而且我们没有对样式进行硬编码，我们只是指应该定义样式的位置。

“但是如果浏览器不支持 .classList 怎么办？”：这么说的唯一原因是你没有跟上浏览器的改进速度。 Every browser supports classList.

当然，如果您需要做的不仅仅是切换，请将您的函数编写为独立操作，然后向其抛出元素：

var records = {};

function toggleHighlight(e) {
  e.classList.toggle("highlight");
  if (e.classList.contains("highlight")) {
    // element is now highlighted, do things accordingly:
    records[e.id] = e.textContent;
    // ...
  } else {
    records[e.id] = false;
    // ...
  }
}

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  toggleHighlight(e);
});

【讨论】：

【解决方案3】：

这对你有帮助吗？

function onclick(){
        var clicked = document.getElementById('i10');
        if(clicked.style.color == "pink"){
            clicked.style.color == "black";
        }
        else{
            clicked.style.color == "pink";
            //do your businesses                
        }
}

【讨论】：

【解决方案4】：

从共享代码中，您可以执行一些操作，例如检查 textContent 是否已存在于数组中，如果它已被单击，则将其从数组中删除并更改颜色

if (i === 10) {
    var clicked = document.getElementById('i10'),
        index = clickedButton.indexOf(click.textContent);
    if (index > -1) {
        clickedButton.push(click.textContent);
        clicked.style.color = "pink";
    } else {
        clickedButton.splice(index, 1);
        clicked.style.color = "";
    }
}

【讨论】：