Categories
JavaScript Answers

How to differentiate single click event and double click event with JavaScript?

Spread the love

Sometimes, we want to differentiate single click event and double click event with JavaScript.

In this article, we’ll look at how to differentiate single click event and double click event with JavaScript.

How to differentiate single click event and double click event with JavaScript?

To differentiate single click event and double click event with JavaScript, we can use the detail property.

For instance, we write

element.onclick = (event) => {
  if (event.detail === 1) {
    // ...
  } else if (event.detail === 2) {
    // ...
  }
};

to add an click listener to element.

In the onclick method, we check if details is 1 or 2.

If it’s 1, then it’s a single click.

If it’s 2, then it’s a double click.

Conclusion

To differentiate single click event and double click event with JavaScript, we can use the detail property.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *