javascript - 如何检测是否在 JavaScript 中单击了某些内容？ (不使用 jQuery)

Question

这个问题在这里已经有了答案:





JavaScript event registering without using jQuery

(6 个回答)


8年前关闭。




我想创建一个 bool 函数，可以检测某个元素是否被点击，然后输出真假。我想在没有 jQuery 的纯 JavaScript 中做到这一点，我的想法看起来像这样:

function clicked(whatever-element-I-want) {

  if(whatever-element-I-want==clicked) {
    return true;
  } else {
    return false;
  }
}

我知道这个问题可能看起来很愚蠢，但我对到目前为止遇到的所有事情都感到困惑，并且真的很想得到一个很好的、简单的解释答案。

Answer 1

通常 HTML 元素不跟踪状态，无论它们是否被点击。相反，当一个元素被点击时，它会触发 点击事件。要跟踪元素的点击，您可以将状态存储在一个变量中，并在该元素触发点击事件时更新它:

HTML:

<div id="myElement">Click me!</div>

JS:

var elementIsClicked = false; // declare the variable that tracks the state
function clickHandler(){ // declare a function that updates the state
  elementIsClicked = true;
}

var element = document.getElementById('myElement'); // grab a reference to your element
element.addEventListener('click', clickHandler); // associate the function above with the click event

请注意，当您单击该元素时，页面上的所有其他代码都已执行。通常，对于基于事件的编程，您希望在事情发生时做一些事情。以下是您可以不时检查元素是否已被单击的方法:

// check if the element has been clicked every 2 seconds:
function isElementClicked (){
  console.log(elementIsClicked ? 'CLICKED' : 'NOT');
}
setInterval(isElementClicked, 2000);