Long Press in JavaScript? Long Press in JavaScript? javascript javascript

Long Press in JavaScript?


There is no 'jQuery' magic, just JavaScript timers.

var pressTimer;$("a").mouseup(function(){  clearTimeout(pressTimer);  // Clear timeout  return false;}).mousedown(function(){  // Set timeout  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);  return false; });


Based on Maycow Moura's answer, I wrote this. It also ensures that the user didn't do a right click, which would trigger a long press and works on mobile devices. DEMO

var node = document.getElementsByTagName("p")[0];var longpress = false;var presstimer = null;var longtarget = null;var cancel = function(e) {    if (presstimer !== null) {        clearTimeout(presstimer);        presstimer = null;    }    this.classList.remove("longpress");};var click = function(e) {    if (presstimer !== null) {        clearTimeout(presstimer);        presstimer = null;    }    this.classList.remove("longpress");    if (longpress) {        return false;    }    alert("press");};var start = function(e) {    console.log(e);    if (e.type === "click" && e.button !== 0) {        return;    }    longpress = false;    this.classList.add("longpress");    if (presstimer === null) {        presstimer = setTimeout(function() {            alert("long click");            longpress = true;        }, 1000);    }    return false;};node.addEventListener("mousedown", start);node.addEventListener("touchstart", start);node.addEventListener("click", click);node.addEventListener("mouseout", cancel);node.addEventListener("touchend", cancel);node.addEventListener("touchleave", cancel);node.addEventListener("touchcancel", cancel);

You should also include some indicator using CSS animations:

p {    background: red;    padding: 100px;}.longpress {    -webkit-animation: 1s longpress;            animation: 1s longpress;}@-webkit-keyframes longpress {    0%, 20% { background: red; }    100% { background: yellow; }}@keyframes longpress {    0%, 20% { background: red; }    100% { background: yellow; }}


You can use taphold event of jQuery mobile API.

jQuery("a").on("taphold", function( event ) { ... } )