Question

我在我的网站上放置了（不喜欢和不喜欢的按钮，不喜欢在Facebook上）的人。我想要显示喜欢和不喜欢的值。我做到了，但是我只想单击一下。该怎么办？

  var clicks = 0;
function updateClickCount() {
    document.getElementById("clickCount").innerHTML = clicks;
}





 onClick="clicks--; updateClickCount();
 onClick="clicks++; updateClickCount();

我希望单击一下按钮，但实际需要的按钮多少。

Answer 1

使用removeEventListener单击按钮后，可以删除事件侦听器。请记住，removeEventListener调用中提供的参数必须与addEventListener调用中提供的参数相同，否则将无法正常工作。

var button = document.getElementById("btn");
button.addEventListener("click", onClick);

function onClick() {
  console.log("Clicked");
  button.removeEventListener("click", onClick);
}

<button id="btn">Click Me!</button>

如果您已内联添加了侦听器（使用onClick=""属性），则不能使用removeEventListener。但是，您可以删除onClick属性。

var button = document.getElementById("btn");

function onClick() {
  console.log("Clicked");
  button.removeAttribute("onClick");
}

<button id="btn" onClick="onClick()">Click Me!</button>

您可以禁用该按钮，使其不可单击。

var button = document.getElementById("btn");
button.addEventListener("click", onClick);

function onClick() {
  console.log("Clicked");
  button.disabled = true;
}

<button id="btn">Click Me!</button>

您可以使用Promise（承诺只能被解决一次）。

var button = document.getElementById("btn");
new Promise(function(resolve) {
  button.addEventListener("click", resolve);
}).then(onClick);

function onClick() {
  console.log("Clicked");
}

<button id="btn">Click Me!</button>

最后，将有关是否已单击按钮的信息存储在布尔变量中。

var button = document.getElementById("btn");
var buttonFlag = false;
button.addEventListener("click", onClick);

function onClick() {
  if (buttonFlag) return;
  console.log("Clicked");
  buttonFlag = true;
}

<button id="btn">Click Me!</button>

Answer 2

如果要创建自定义喜欢/不喜欢的功能，请尝试单击带有cookie的按钮。如果在单击按钮后禁用了按钮，则用户将能够在重新加载页面时单击该按钮。检查Cookie（如果存在）-不处理点击事件，否则-增加/减少值和设置Cookie。在这里您可以阅读有关将Cookie与javascript一起使用 Onclick javascript cookie， Set cookie and get cookie with JavaScript

如何只单击一次按钮

2 个答案: