Premere a lungo in JavaScript?
-
26-09-2019 - |
Domanda
E 'possibile attuare "premere a lungo" in JavaScript (o jQuery)? Come?
(fonte: androinica.com )
HTML
<a href="" title="">Long press</a>
JavaScript
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
Soluzione
Non c'è magia 'jQuery', solo i timer 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;
});
Altri suggerimenti
In base a risposta di Maycow Moura, ho scritto questo. Inoltre, garantisce che l'utente non ha fatto un click destro, il che farebbe scattare una pressione prolungata e funziona su dispositivi mobili. 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);
Si dovrebbe anche includere alcuni indicatori con le animazioni 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; }
}
È possibile utilizzare taphold caso di jQuery API mobile.
jQuery("a").on("taphold", function( event ) { ... } )
Mentre lo fa abbastanza semplice sguardo da implementare sul proprio con un timeout e un paio di gestori di eventi del mouse, diventa un po 'più complicato se si considera casi come click-trascina-rilascia, che supporta sia stampa e premere a lungo su lo stesso elemento, e lavorare con dispositivi touch come l'iPad. Ho finito per usare il longclick plugin jQuery ( Github ), che si prende cura di quella roba per me. Se avete solo bisogno di dispositivi touchscreen di supporto come i telefoni cellulari, si potrebbe anche provare il jQuery Mobile evento taphold .
jQuery. Basta mettere $(expression).longClick(function() { <your code here> });
. Secondo parametro è la durata attesa; timeout predefinito è 500 ms.
(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);
lungo-press-evento (0.5K puro JavaScript) per risolvere questo, si aggiunge un evento long-press
al DOM.
attendere il long-press
su qualsiasi elemento:
// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
Ascolta un long-press
su un specifica elemento:
// get the element
var el = document.getElementById('idOfElement');
// add a long-press event listener
el.addEventListener('long-press', function(e) {
// stop the event from bubbling up
e.preventDefault()
console.log(e.target);
});
Lavori in IE9 +, Chrome, Firefox, Safari e applicazioni mobili ibridi (Cordova e ionico su iOS / Android)
$(document).ready(function () {
var longpress = false;
$("button").on('click', function () {
(longpress) ? alert("Long Press") : alert("Short Press");
});
var startTime, endTime;
$("button").on('mousedown', function () {
startTime = new Date().getTime();
});
$("button").on('mouseup', function () {
endTime = new Date().getTime();
longpress = (endTime - startTime < 500) ? false : true;
});
});
Per gli sviluppatori cross-platform (Nota Tutte le risposte date finora non funziona su iOS) :
mouseup / giù sembrava funzionare bene su Android - ma non tutti i dispositivi, vale a dire (samsung TAB4). non ha funzionato affatto su iOS .
Ulteriori ricerche sua Sembra che questo è dovuto al elemento avente selezione e le interupts ingrandimento nativi l'ascoltatore.
Questo listener di eventi consente una miniatura per essere aperto in un modal bootstrap, se l'utente tiene l'immagine per la 500 ms.
Si utilizza una classe immagine sensibile che mostra quindi una versione più grande dell'immagine. Questo pezzo di codice è stato completamente testato su (iPad / TAB4 / TabA / Galaxy4):
var pressTimer;
$(".thumbnail").on('touchend', function (e) {
clearTimeout(pressTimer);
}).on('touchstart', function (e) {
var target = $(e.currentTarget);
var imagePath = target.find('img').attr('src');
var title = target.find('.myCaption:visible').first().text();
$('#dds-modal-title').text(title);
$('#dds-modal-img').attr('src', imagePath);
// Set timeout
pressTimer = window.setTimeout(function () {
$('#dds-modal').modal('show');
}, 500)
});
La risposta del Diodeus è impressionante, ma evitare di aggiungere una funzione onClick, che sarà mai a corto funzione Hold se si mette un onclick. E la risposta del Razzak è quasi perfetto, ma è gestito funzione di attesa solo su mouseup, e, in generale, la funzione viene eseguito anche se mastio utente partecipazione.
Così, ho unito entrambi, e ha fatto questa:
$(element).on('click', function () {
if(longpress) { // if detect hold, stop onclick function
return false;
};
});
$(element).on('mousedown', function () {
longpress = false; //longpress is false initially
pressTimer = window.setTimeout(function(){
// your code here
longpress = true; //if run hold function, longpress is true
},1000)
});
$(element).on('mouseup', function () {
clearTimeout(pressTimer); //clear time on mouseup
});
Si potrebbe impostare il timeout per quell'elemento al passaggio del mouse verso il basso e chiaro sul mouse verso l'alto:
$("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;
});
Con questo ogni elemento ottiene il proprio timeout.
Per i browser moderni, telefoni:
document.addEventListener('contextmenu', callback);
https://developer.mozilla.org/en-US/ docs / Web / Eventi / contextmenu
È possibile utilizzare taphold di jquery-mobile. Includere jQuery-mobile.js e il seguente codice funziona bene
$(document).on("pagecreate","#pagename",function(){
$("p").on("taphold",function(){
$(this).hide(); //your code
});
});
La maggior parte elegante e pulito è un plugin jQuery: https://github.com/untill/jquery.longclick/ , anche disponibile come packacke: https://www.npmjs.com/package/jquery.longclick .
In breve, lo si utilizza in questo modo:
$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );
Il vantaggio di questo plugin è che, a differenza di alcune delle altre risposte qui, fare clic su Eventi sono ancora possibili. Si noti inoltre che un lungo click si verifica, proprio come una lunga tap su un dispositivo, prima di MouseUp. Così, che è una caratteristica.
Per me è lavoro con il codice (con jQuery):
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);
È possibile controllare il tempo per identificare Clicca o prolungata [jQuery]
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);
}
}
come questo?
doc.addEeventListener("touchstart", function(){
// your code ...
}, false);
È possibile utilizzare gli eventi di tocco jquery
. ( vedere qui )
let holdBtn = $('#holdBtn')
let holdDuration = 1000
let holdTimer
holdBtn.on('touchend', function () {
// finish hold
});
holdBtn.on('touchstart', function () {
// start hold
holdTimer = setTimeout(function() {
//action after certain time of hold
}, holdDuration );
});
Avevo bisogno di qualcosa per gli eventi della tastiera longpress, così ho scritto questo.
var longpressKeys = [13];
var longpressTimeout = 1500;
var longpressActive = false;
var longpressFunc = null;
document.addEventListener('keydown', function(e) {
if (longpressFunc == null && longpressKeys.indexOf(e.keyCode) > -1) {
longpressFunc = setTimeout(function() {
console.log('longpress triggered');
longpressActive = true;
}, longpressTimeout);
// any key not defined as a longpress
} else if (longpressKeys.indexOf(e.keyCode) == -1) {
console.log('shortpress triggered');
}
});
document.addEventListener('keyup', function(e) {
clearTimeout(longpressFunc);
longpressFunc = null;
// longpress key triggered as a shortpress
if (!longpressActive && longpressKeys.indexOf(e.keyCode) > -1) {
console.log('shortpress triggered');
}
longpressActive = false;
});