# Detect when a button is being pressed down

**URL:** <https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289>\
**Category:** Coding Questions\
**Created:** [February 11, 2019, 1:16pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289 "2019-02-11T13:16:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [February 11, 2019, 1:16pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/1 "2019-02-11T13:16:40Z")

</div>

Hey, a simple question: if I have an html button, how can I detect when the button is _being pressed_. I am not interested in doing something when the button is clicked, but instead in doing something for the entire time that the button _is being pressed_ . Sorta like haveing a boolean like _isMousePressed_ , but just for when a html button is being pressed.

Hope my question makes sense somehow?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 11, 2019, 3:28pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/2 "2019-02-11T15:28:10Z")

</div>

1. [p5js.org/reference/#/p5/select](http://p5js.org/reference/#/p5/select)
2. [p5js.org/reference/#/p5.Element/mousePressed](http://p5js.org/reference/#/p5.Element/mousePressed)
3. [p5js.org/reference/#/p5.Element/mouseReleased](http://p5js.org/reference/#/p5.Element/mouseReleased)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 11, 2019, 3:28pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/3 "2019-02-11T15:28:25Z")

</div>

Hey,

You can use a JavaScript event handler for that (next time you can easily search this on internet) :

```auto
document.getElementById('button').onclick = function() {
   alert("button was clicked");
}​;​

```

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [February 11, 2019, 3:54pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/4 "2019-02-11T15:54:00Z")

</div>

@GoToLoop, great, thank you! I made a basic example here for reference. Could it be made more elegantly somehow, or do you need a separate function for both mousePressed and mouseReleased like I have done?

```auto
var d = 10;
var pressed = false;

function setup() {
  createCanvas(400,400);
  myButton = createButton("press me");
  myButton.mousePressed(begin); 
  myButton.mouseReleased(end); 
}

function draw() {
  background(120);
  ellipse(width / 2, height / 2, d, d);
  if (pressed) d++;
}

function begin() {
  pressed = true;
}

function end() {
  pressed = false;
}

```

@josephh, thanks. It was not exactly what I meant. I was not interested in detecting a single button click, but instead in doing something for the entire time that the button is being pressed. Perhaps my question was not all that clear…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 11, 2019, 4:06pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/5 "2019-02-11T16:06:01Z")

</div>

> [@AndreasRef](#):
>
> Could it be made more elegantly somehow, …

Elegantly I dunno, but shortened surely: 😉

```auto
createButton('Keep pressing me')
  .mousePressed (() => pressed = true)
  .mouseReleased(() => pressed = false);

```

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [February 11, 2019, 4:08pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289/6 "2019-02-11T16:08:29Z")

</div>

Thanks, just what I was looking for!