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 ) { ... } )