Tap (no realease) or click event in javascript?

Keywords´╝Ü javascript events mobile


I'd like to have an event fire whenever a user does a mouse click or a touchscreen tap. I've tried using the "click" event, but on touchscreens it waits until the tap has finished and is more of a tap-and-release than a tap event. It does not feel correct.

Is there an event which does either tap (no release) or click listening?

P.S. This question (JavaScript custom tap event) is about jquery.


No, there is no single event which represents the default "selection" action of both mouse and touch screen. You can, though, use a mix of events.

The two most common events users expect to create a reaction are "click" and "touchstart", but you can't simply listen to both of those because the click event is generally triggered after the touchstart event (leading to a double trigger).

The following is some simple code for avoiding this issue:

function onTapOrClick(element, cb) {
    let debounce;  // temporarily disables on click events when touchstarts happen
    element.addEventListener("touchstart", (event) => {
        if (debounce) { clearTimeout(debounce); }
        debounce = setTimeout(() => debounce = undefined, 1000);  // debounce is 1000ms, could easily be longer
    element.addEventListener("click", (event) => {
        if (debounce) { return; }