Question

我搜索一个简单，简短，纯粹的Javascript方法。我试着有一种这样的

 if (button.clicked === false) {
 }

使用jsfiddle答案很好。但它不是必须的：D

Answer 1

按钮不记得是否自动点击了它们。您可以在按钮中添加dataset来保存此信息。

＆＃13;

var button1 = document.getElementById("button1");
button1.addEventListener("click", function() {
  button1.dataset.clicked = "true";
});

document.getElementById("button2").addEventListener("click", function() {
  console.log(button1.dataset.clicked ? "Yes" : "No");
});

＆＃13;

<button id="button1">Click me</button>
<br>
<button id="button2">Was it clicked?</button>

＆＃13;

Answer 2

处理此问题的最简单方法是使用class属性来处理此问题。例如：

＆＃13;

document.querySelector('button').addEventListener('click', function() {
  if (this.classList.value.match(/not-yet-clicked/)) {
    this.classList.remove('not-yet-clicked');
    this.textContent = 'The button is clicked';
    this.disabled = true;
  }
})

＆＃13;

<button class="not-yet-clicked">Click me</button>

＆＃13;

或者如果你想玩旗帜，你可以这样做：

＆＃13;

var clicked = false;
document.querySelector('button').addEventListener('click', function () {
  clicked = true;
  if (clicked) {
    this.textContent = 'Clicked';
    this.disabled = true;
  }
});

＆＃13;

<button>Not yet clicked</button>

＆＃13;

Answer 3

var clicked = false;

function check(){
 if (clicked === false) {
     // code
 };
}

target.addEventListener("click", function(){
    clicked = true;
    check()
});

Answer 4

您可以通过多种方法检查按钮是否未被点击：

设置全局变量：

var buttonClicked = false;

function clickButton() {
    buttonClicked = true;
}

设置自定义属性：

<button clicked="false">Click me</button>

function clickButton() {
    if (this.getAttribute('clicked') == 'false') {
        this.setAttribute('clicked', 'true');
    }
}

if (button.getAttribute('clicked') === 'true') {
   // your code
}

Answer 5

下面是香草JavaScript的样子。您可以设置全局变量来检查状态。

＆＃13;

var btnClicked = false;
document.getElementById("btn").onclick = function() {
  btnClicked = true;
  document.getElementById("text").innerHTML = "Clicked = true";
}

＆＃13;

<button id="btn">
Click
</button>
<p id="text">
  Clicked = false
</p>

＆＃13;

然后你可以像你提到的那样验证状态

if (btnClicked === false) {
}

Answer 6

不要听任何人告诉你设置全局变量 - 你不需要它。

每个HTML元素都是一个对象。我们可以简单地定义一个名为clicked的单独属性。

首先我们检查它是否未定义。如果是，我们将其设置为true，否则我们将其设置为与其设置的相反的布尔值。这意味着如果它是true，则点击它会变为false，反之亦然。

此属性与元素保持一致。如控制台日志中所示。我使用document.querySelector("button")返回DOM，以显示它可以从click函数外部获得。

＆＃13;

document.querySelector("button").addEventListener("click", function() {
  (this.clicked != undefined) ?
  this.clicked = !this.clicked : 
  this.clicked = true;
  
  console.log(document.querySelector("button").clicked);
});

＆＃13;

<button>click me</button>

＆＃13;

Answer 7

在JavaScript中，对象的未定义属性是假的。所以你可以写下这样的东西：

button = {}; //obviously assign to your button.
if (!button.clicked) {
  //do stuff like:
  console.log(!button.clicked);
}

这可能不是最佳做法，但它简短而方便。

Answer 8

这不一定能回答问题，但它是相关的。我想找到一种在其他位置注册点击的方法，不知道您可以添加一个名为“ focusout”的事件监听器，而不是该元素以外的点击事件监听器。

如果您有输入内容，并且想知道何时有人单击它：

input.addEventListener('focusout', cellUnfocused);

function cellUnfocused() {
    console.log(this, "unfocused");
}

这将记录输入元素，因此现在您可以像“未单击”侦听器一样执行功能。

如果没有单击按钮，我该如何检查

8 个答案: