Check if the right click is being held in Javascript

DanielApril 11, 2023

As a follow-up to the article about how to detect the right click in Javascript let's see how can we detect if the user is doing a right click and holding that click.

For example, we want to build a rectangle that changes its color if we right-click and hold for 1.5 seconds.

If you want to skip ahead here is the full codepen of this example.

We will start with a very simple HTML:

<div id="myDiv"></div>

and CSS:

#myDiv {
  widht: 100px;
  height: 100px;
  border: 1px solid;
}

.active { background-color: orangered }

We aim to apply the .active to the #myDiv after the right-click is held for 1.5 seconds.

For this, we will build a RightClickHolder utility class that exposes a static listen(el, callback, time) method referencing the target element, a callback function, and the interval after we invoke the callback:

const myDiv = document.querySelector('#myDiv')
RightClickHolder.listen(
  myDiv, 
  ()=> myDiv.classList.add("active"), 
  2000
)

And below is the full implementation of the RightClickHolder class:

class RightClickHolder {

  constructor(el, callback, time) {
    this.el = el
    this.callback = callback
    this.isHeld = false
    this.time = time
    this.timeoutPointer = null
    this.#setupListeners()
  }

  #setupListeners() {
    this.el.addEventListener('contextmenu', (e)=> {
      e.preventDefault()
      this.#onHoldStart()
    })
    this.el.addEventListener('mouseup', this.#onHoldEnd.bind(this))
  }

  #onHoldStart() {
    this.isHeld = true
    this.timeoutPointer = setTimeout(
      ()=> this.callback()
    , this.time )
  }

  #onHoldEnd() {
    this.isHeld = false
    clearTimeout(this.timeoutPointer)
  }

  static listen(el, callback, time) {
    new RightClickHolder(el, callback, time)
  }
}

const myDiv = document.querySelector('#myDiv')
RightClickHolder.listen(
  myDiv, 
  ()=> myDiv.classList.add("active"), 
  1500
)

In a nutshell, the private methods named #onHoldStart() and #onHoldEnd() start and stop a simple timeout that ads the .active CSS class while the #setupListeners() will add event listeners for mouse up and the context menu events.

And speaking of the context menu make sure not to forget the e.preventDefault() so that we can block the default right-click browser menu.

You can checkout the full codepen of this example.