Check if a button is being clicked in Javascript

Question

Here's my question: I want to see from javascript if an object is being clicked at the moment, Here is an example:

setInterval(function() {
    if (document.getElementByTagName('button')[0].isBeingClicked) { //I know this isn't right: This is where my question is about.
        console.log('Button being clicked');
        return;
    };
    console.log('Button not being clicked');
}, 1000);

With as simplified HTML ofcourse:

<html>
    <head></head>
    <body>
        <button>Click me</button>
    </body>
</html>

So all together: I want to be able to see whether a button or another object is being clicked at this time. Not if it has been clicked, but is being clicked.

Are you looking for the `mousedown` and `mouseup` events? – George Nov 18 '14 at 15:05 — George, Nov 18 '14 at 15:05
It is, Brandon. Thank you! – user274595 Nov 18 '14 at 15:44 — user274595, Nov 18 '14 at 15:44

score 2 · Accepted Answer · edited May 23 '17 at 12:05

I think this might be what you are looking for.

HTML

<button onmousedown="mouseDown()" onmouseup="mouseUp()">Click me</button>

Javascript

<script>
var click = false;
function mouseDown() {
    click = true;
    console.log('Button being clicked');
}
function mouseUp() {
    click = false;
    console.log('Button not being clicked');
}
setInterval(function(){
    if (click === false) {  
        console.log('Button not being clicked');
    } else if (click === true) {
        console.log('Button being clicked');
    }
}, 1000)
</script>

An alternative solution, and much more in depth answer can be found here.

score 0 · Answer 2 · answered Nov 18 '14 at 15:11

0

As George stated, you are looking for the mousedown() event. It fires exactly when the click happens not after it's been clicked.

http://api.jquery.com/mousedown/

answered Nov 18 '14 at 15:11

EricBellDesigns

955
1
9
33

score 0 · Answer 3 · answered Nov 18 '14 at 15:27

0

  if (document.getElementsByTagName('button')[0].onmousedown)

You are missing the s after elements. It returns an array, Hence the [0]. If this isn't the first button on the page than this won't work, Use the code below if there's more than 1 button,

var buttons=document.getElementsByTagName('button');
for(var i=0;i > buttons.length; i++){
  buttons[i].addEventlistener("mousedown", MyFunction);
}

This will call a function called MyFunction on the press of any buttons

answered Nov 18 '14 at 15:27

Billy

2,448
1
10
13

Yes I've tried this, but my aim is to check if a button is being clicked, and not have a function which is being called at a click. So it's kind of the other way around. Thanks anyway! – user274595 Nov 18 '14 at 15:36

Check if a button is being clicked in Javascript

3 Answers3

Linked