I am making a custom element. I want to have a function that continuously does stuff from when the mouse is pressed down on the element until either the button is released or the mouse leaves the element. My issue is that it seems that while I'm holding the mouse down no other events are firing.

This only seems to be an issue in FireFox as it works basically as intended in Chrome when I tested it. Any tips on how I could make it work in FF? Relevant code snippets below:

// attaching event listeners in connectedCallback
connectedCallback() {
  /*
    Some other code before...
  */
  this.addEventListener('mousedown', this._onMouseDown)
  this.addEventListener('mouseenter', this._setMouseOnTrue)
  this.addEventListener('mouseup', this._setMouseOnFalse)
  this.addEventListener('mouseleave', this._setMouseOnFalse)
}

_setMouseOnTrue(event) { this._mouseOn = true}
_setMouseOnFalse(event) { this._mouseOn = false }
_onMouseDown(event) {
  if (event.button === 0) {
    this._setMouseOnTrue(event)
    this.func()
  }
}

func() {
  if (this._mouseOn) {
    this._privateFunc()
    setTimeOut(this.func.bind(this), time)
  }
}