长期在JavaScript？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了长期在JavaScript？相关的知识，希望对你有一定的参考价值。
是否可以在javascript（或jQuery）中实现“长按”？怎么样？
<a href="" title="">Long press</a>
JavaScript的
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
没有'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;
});
您可以在鼠标按下时设置该元素的超时并在鼠标向上清除它：
$("a").mousedown(function() {
// set timeout for this element
var timeout = window.setTimeout(function() { /* … */ }, 1234);
$(this).mouseup(function() {
// clear timeout for this element
window.clearTimeout(timeout);
// reset mouse up event handler
$(this).unbind("mouseup");
return false;
});
return false;
});
有了这个，每个元素都有自己的超时。
对于现代移动浏览器：
document.addEventListener('contextmenu', callback);
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
你可以使用jquery-mobile的taphold。包括jquery-mobile.js，以下代码将正常工作
$(document).on("pagecreate","#pagename",function(){
$("p").on("taphold",function(){
$(this).hide(); //your code
});
});
最优雅和干净的是一个jQuery插件：qazxsw poi，也可以作为包：qazxsw poi。
简而言之，您可以像这样使用它：
https://github.com/untill/jquery.longclick/
这个插件的优点是，与此处的其他一些答案相比，单击事件仍然是可能的。另请注意，在鼠标放置之前，就像在设备上长按一样，会发生长时间点击。所以，这是一个功能。
对我来说，它可以使用该代码（使用jQuery）：
https://www.npmjs.com/package/jquery.longclick
您可以检查识别点击或长按的时间[jQuery]
$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );
像这样？
var int = null,
fired = false;
var longclickFilm = function($t) {
$body.css('background', 'red');
},
clickFilm = function($t) {
$t = $t.clone(false, false);
var $to = $('footer > div:first');
$to.find('.empty').remove();
$t.appendTo($to);
},
touchStartFilm = function(event) {
event.preventDefault();
fired = false;
int = setTimeout(function($t) {
longclickFilm($t);
fired = true;
}, 2000, $(this)); // 2 sec for long click ?
return false;
},
touchEndFilm = function(event) {
event.preventDefault();
clearTimeout(int);
if (fired) return false;
else clickFilm($(this));
return false;
};
$('ul#thelist .thumbBox')
.live('mousedown touchstart', touchStartFilm)
.live('mouseup touchend touchcancel', touchEndFilm);
您可以使用function AddButtonEventListener() {
try {
var mousedowntime;
var presstime;
$("button[id$='" + buttonID + "']").mousedown(function() {
var d = new Date();
mousedowntime = d.getTime();
});
$("button[id$='" + buttonID + "']").mouseup(function() {
var d = new Date();
presstime = d.getTime() - mousedowntime;
if (presstime > 999/*You can decide the time*/) {
//Do_Action_Long_Press_Event();
}
else {
//Do_Action_Click_Event();
}
});
}
catch (err) {
alert(err.message);
}
}
Touch活动。 （doc.addEeventListener("touchstart", function(){
// your code ...
}, false);
）
jquery我需要长按键盘事件的东西，所以我写了这个。
see here
根据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; }
}
您可以使用jQuery mobile API的taphold事件。
jQuery("a").on("taphold", function( event ) { ... } )
虽然它看起来很简单，可以通过超时和几个鼠标事件处理程序自行实现，但是当您考虑点击 - 拖动 - 释放，同时支持按下和长按同一元素时，它会变得有点复杂，以及使用iPad等触控设备。我最终使用了longclick jQuery plugin（Github），它为我照顾那些东西。如果您只需要支持手机等触摸屏设备，您也可以试试jQuery Mobile taphold event。
jQuery插件。只要把$(expression).longClick(function() { <your code here> });。第二个参数是保持时间;默认超时为500毫秒。
(function($) {
$.fn.longClick = function(callback, timeout) {
var timer;
timeout = timeout || 500;
$(this).mousedown(function() {
timer = setTimeout(function() { callback(); }, timeout);
return false;
});
$(document).mouseup(function() {
clearTimeout(timer);
return false;
});
};
})(jQuery);
我创建了long-press-event（0.5k纯JavaScript）来解决这个问题，它向DOM添加了一个long-press事件。
在任何元素上听取long-press：
// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
听取特定元素的long-press：
// get the element
var el = document.getElementById('idOfElement');
// add a long-pre以上是关于长期在JavaScript？的主要内容，如果未能解决你的问题，请参考以下文章
javascript 用于在节点#nodejs #javascript内设置react app的代码片段
VSCode自定义代码片段12——JavaScript的Promise对象
VSCode自定义代码片段12——JavaScript的Promise对象