# Capturing mousedown (and mouseup) event

**URL:** <https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398>\
**Category:** plotly.js\
**Created:** [March 22, 2025, 5:48pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398 "2025-03-22T17:48:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![filipesmg](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@filipesmg](https://community.plotly.com/u/filipesmg)\
**Post date:** [March 22, 2025, 5:48pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/1 "2025-03-22T17:48:55Z")

</div>

Ok, here is another one: I’d like to change the color of a bar in a bar chart plot (actually, I’d like to gray out all other bars) when clicking and holding the click, then go back to “normal” when releasing the click. However, it seems that plotly does not have a mousedown event. The solution suggested [here](https://community.plotly.com/t/mousedown-events-in-the-plot-area/6329/5) also does not work, as I’d need information of the bar that is clicked to be able to selectively change the color. Is there a way to achieve this?

---

<div class="post-metadata">

**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\
**Post date:** [March 22, 2025, 6:48pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/2 "2025-03-22T18:48:53Z")

</div>

Here I have an example of how I captured the mousemove event of the bars, but to perform other actions, it may be useful to you.

[https://codepen.io/saratoga01/pen/abgzeQV](https://codepen.io/saratoga01/pen/abgzeQV)

---

<div class="post-metadata">

**Author:** ![filipesmg](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@filipesmg](https://community.plotly.com/u/filipesmg)\
**Post date:** [March 22, 2025, 9:12pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/3 "2025-03-22T21:12:29Z")

</div>

Oh, I see, you create the events yourself! That’s very interesting! It works if I change `mousemove` to `mousedown` or `mouseup`, I just have to check how to trigger both at the same time. Thank you!

---

<div class="post-metadata">

**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\
**Post date:** [March 22, 2025, 11:11pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/4 "2025-03-22T23:11:23Z")

</div>

Check this

[https://codepen.io/saratoga01/pen/NPWzWNz?editors=0010](https://codepen.io/saratoga01/pen/NPWzWNz?editors=0010)

---

<div class="post-metadata">

**Author:** ![filipesmg](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@filipesmg](https://community.plotly.com/u/filipesmg)\
**Post date:** [March 23, 2025, 3:34pm UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/5 "2025-03-23T15:34:41Z")

</div>

Aha! I was trying something similar, but with the `dispatchEvent`, like

```auto
        bars[i].onmousedown = e => {
          if(layer._fullLayout._lasthover)
            layer._fullLayout._lasthover.dispatchEvent(new MouseEvent("mousedown", e))
        }
        bars[i].onmouseup = e => {
          if(layer._fullLayout._lasthover)
            layer._fullLayout._lasthover.dispatchEvent(new MouseEvent("mouseup", e))
        }

```

and for some reason (I don’t really understand), that only triggers the `mousedown` event - regardless of the order. But it seems I don’t need that at all! Thanks!

---

<div class="post-metadata">

**Author:** ![filipesmg](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@filipesmg](https://community.plotly.com/u/filipesmg)\
**Post date:** [April 15, 2025, 8:58am UTC](https://community.plotly.com/t/capturing-mousedown-and-mouseup-event/91398/6 "2025-04-15T08:58:31Z")

</div>

I have finally time to go back to this. I have changed a little the implementation to be able to move the mouse out of the hovering while pressing the button:  
[https://codepen.io/filipesmg/pen/GggKqBj](https://codepen.io/filipesmg/pen/GggKqBj)  
That works fine on codepen, but when I try to do it on my code, the bars are listed correctly (although it bars also include the ones in the rangeslider in my case, when I use it), but the mouse events on it are not being triggered.

I’m using pretty much the same code:

```auto
      graphDiv[0]
        .on("plotly_hover", highlight)
        .on("plotly_unhover", unhighlight)
        .on("plotly_relayout", data => { // Trigerring mouseup and mousedown events
          console.log("relayout triggered!")
          let bars = document.querySelectorAll(".barlayer .bars .points .point path")
          for(let i = 0; i < bars.length; i++) {
            bars[i].onmousemove = e => {
              console.log("Mousemove!")
              if(graphDiv[0]._fullLayout._lasthover)
                graphDiv[0]._fullLayout._lasthover.dispatchEvent(new MouseEvent("mousemove", e))
            }
            bars[i].onmouseout = e => {
              console.log("Mouseout!")
              if(graphDiv[0]._fullLayout._lasthover)
                graphDiv[0]._fullLayout._lasthover.dispatchEvent(new MouseEvent("mouseout", e))
            }
            bars[i].onmousedown = e => {
              console.log("Mousedown!")
              // grayOthers(traces)
              // Plotly.update(self.id, traces, layout);
            }
            bars[i].onmouseup = e => {          
              console.log("Mouseup!")
              // resetColors(traces)
              // Plotly.update(self.id, traces, layout);
            }
          }
        })

```

Any idea on what may be the reason why?

One thing I noticed is that when I hover over the bar in codepen, I see the mouse arrow, while on mine, I see the crosshair. Maybe this is related? I’m using Plotly 3.0.0, and codepen uses now 3.0.1, so I assume this is not the issue.