TA貢獻1884條經驗 獲得超4個贊
沒有'jQuery'魔法，只有JavaScript定時器。
var pressTimer;$("a").mouseup(function(){
clearTimeout(pressTimer);
// Clear timeout
return false;}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
return false; });
TA貢獻1847條經驗 獲得超7個贊
根據Maycow Moura的回答，我寫了這個。它還確保用戶不會進行右鍵單擊，這會觸發長按并在移動設備上運行。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);您還應該使用CSS動畫包含一些指標：
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; }}舉報
