如何在JavaScript中检测是否有东西被点击?(不使用jQuery)

bxgwgixi  于 2023-04-10  发布在  Java
关注(0)|答案(3)|浏览(75)

此问题已在此处有答案

JavaScript event registering without using jQuery(6个回答)
9年前关闭。
我想创建一个布尔函数,它可以检测某个元素是否被点击,然后输出true或false。我想在纯JavaScript中实现这一点,而不使用jQuery,我的想法如下所示:

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

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

我知道这个问题可能看起来真的很愚蠢,但我一直困惑的一切,我遇到了到目前为止,真的很想一个好的,简单的解释答案。

g6ll5ycj

g6ll5ycj1#

通常HTML元素不会跟踪状态,无论它们是否被点击。相反,当一个元素被点击时,它会触发一个click事件。要跟踪元素上的点击,你可以将状态存储在一个变量中,并在该元素触发click事件时更新它:
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);
rlcwz9us

rlcwz9us2#

target.addEventListener(type, listener[, useCapture]);

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
下面是你的例子:
联系我们

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

javascript:

// some user defined function
// to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}

// get reference to the DOM element with id = "outside" 
// so that we can add whatever listeners: click, change etc.
// Note: not all DOM elements can handle all listeners.    
var el = document.getElementById("outside");

// attach event types to that reference and let it know how
// to handle that event via callback or a function.
// this could be inline function (as in my example below)
// or you could define a function outside and pass its name
// function add(a,b){ return a + b;}
// el.addEventListener("click", add, false);
el.addEventListener("click", function(){
                                modifyText("four")
                             }, false);
k3bvogb1

k3bvogb13#

这将在单击ID为my-button的按钮时发出“已单击”警报:
HTML

<button id="my-button">Click me</button>

JavaScript

var el = document.getElementById("my-button");

if (el.addEventListener) {
    el.addEventListener("click", function() {
        alert("clicked");
    }, false);
} else { //IE8 support
    el.attachEvent("onclick", function() { 
        alert("clicked");
    });
}

http://jsbin.com/jayutuze/1/edit
现在,从你的问题中,我猜你想要一些负面的反馈,如果按钮没有按下,但这有点复杂:应该在一段时间内不按吗?或者当鼠标悬停在它上面时不应该按吗?请解释你想达到的目的。

相关问题