如何检测JavaScript中是否有被点击的东西？（不使用jQuery）

我想创建一个布尔函数，它可以检测某个元素是否被单击，然后输出true或false。我想，没有jQuery来做到这一点的纯JavaScript，和我的想法看起来是这样的：如何检测JavaScript中是否有被点击的东西？（不使用jQuery）

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

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

我知道这个问题可能看起来很愚蠢，但我一直在通过一切弄得我也碰到过这么远，真的很喜欢一个很好的，简单的解释答案。

来源

2014-02-25 theonlygusti

您是否特指在表单上的提交按钮？或者只是任何旧的元素？ – TylerH

你想要绑定什么？你有什么尝试，没有工作？ –

通常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);

来源

2014-02-25 15:17:34 Tibos

哇！这只是我需要的答案的类型，但是没有办法使函数能够执行元素被点击的瞬间，而不是等待一些时间并重新检查元素是否已被点击？ – theonlygusti

单击元素后会立即执行代码，即'clickHandler'函数。 'setInterval'部分只是为了帮助您注意到elementIsClicked变量在某个时间点发生了变化。 – Tibos

哦，真棒。因此，如果我在'clickHandler'函数中包含要执行的代码，它将立即执行，而不是等待两秒钟？确切地说，是 – theonlygusti

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

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

从这里的文档就是你们的榜样：

HTML：

<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);

来源

2014-02-25 15:08:33 Vikram

如果他们被迄今为止所遇到的一切困惑，他们可能需要的不仅仅是一行代码和一个链接。 –

是啊我一直在编辑我的答案:) – Vikram

你能解释一下代码是如何作为一个函数工作的，以及代码是如何工作的？ – theonlygusti

这将提醒 “点击” 时，按键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

，从你的问题我了解，你需要某种负反馈，如果按钮没有按下，但这有点复杂：应该在一段时间内没有按下吗？或者在悬停时不应该按下它？请解释你想达到的目标。

来源

2014-02-25 15:17:02 Phortuin

如何检测JavaScript中是否有被点击的东西？ （不使用jQuery）

回答

相关问题

如何检测JavaScript中是否有被点击的东西？（不使用jQuery）