# Inconsistent hover events on sp-button

**URL:** <https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864>\
**Category:** Photoshop\
**Created:** [April 25, 2021, 8:42am UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864 "2021-04-25T08:42:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AAverin](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/aaverin/32/1368_2.png) [@AAverin](https://forums.creativeclouddeveloper.com/u/AAverin)\
**Post date:** [April 25, 2021, 8:42am UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864/1 "2021-04-25T08:42:05Z")

</div>

Attaching onMouseEnter and onMouseLeave events on sp-button, events fire twice on enter and twice on leave and also re-fire when hovering over text inside the button.

Example code attached:

```auto
 <sp-button
        onClick={(e) => {
          console.log("click")
        }}
        onMouseEnter={(e) => {
          console.log("mouse enter")
        }}
        onMouseLeave={(e) => {
          console.log("mouse leave")
        }}
      >
        WTF
      </sp-button>

```

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [April 25, 2021, 10:34am UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864/2 "2021-04-25T10:34:59Z")

</div>

Just tested it and I can confirm this.  
`event.preventDefault()` doesn’t work either, not even when you wrap it inside a div. (Then the event fires once for the div and twice for the sp-button, although the sp-button does not even have a listener attached).

Possible workarounds:

- Wrap it in a div, store a reference to the div and then compare it with the `event.target`
- [Debounce](https://davidwalsh.name/javascript-debounce-function) your event handler

---

<div class="post-metadata">

**Author:** ![AAverin](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/aaverin/32/1368_2.png) [@AAverin](https://forums.creativeclouddeveloper.com/u/AAverin)\
**Post date:** [April 25, 2021, 11:10am UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864/3 "2021-04-25T11:10:15Z")

</div>

Also seems to fire twice for regular div

```auto
 <div
        onMouseEnter={() => {
          console.log("Div onMouseEnter")
        }}
        onMouseLeave={() => {
          console.log("Div onMouseLeave")
        }}
      >WTF</div>

```

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [April 25, 2021, 12:51pm UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864/4 "2021-04-25T12:51:34Z")

</div>

Indeed, but when an sp-button is inside the div it only fires once, weirdly enough 😃  
Debouncing or throtteling should work without problems though…

---

<div class="post-metadata">

**Author:** ![AAverin](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/aaverin/32/1368_2.png) [@AAverin](https://forums.creativeclouddeveloper.com/u/AAverin)\
**Post date:** [May 16, 2021, 9:11am UTC](https://forums.creativeclouddeveloper.com/t/inconsistent-hover-events-on-sp-button/2864/6 "2021-05-16T09:11:27Z")

</div>

Seems to work with loadash debounce and setting options to `{ trailing: false, leading: true }`