如何檢測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）