Appuyez longuement sur JavaScript?
-
26-09-2019 - |
Question
Est-il possible de mettre en œuvre "appui long" en JavaScript (ou jQuery)? Comment?
(source: androinica.com )
HTML
<a href="" title="">Long press</a>
JavaScript
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
La solution
Il n'y a pas de magie 'jQuery', juste minuteries 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;
});
Autres conseils
Sur la base de la réponse de Maycow Moura, je l'ai écrit cela. Il assure également que l'utilisateur n'a pas fait un clic droit, ce qui déclencherait une pression longue et fonctionne sur les appareils mobiles. 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);
Vous devez également inclure un indicateur en utilisant des animations 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; }
}
Vous pouvez utiliser taphold cas de l'API jQuery mobile.
jQuery("a").on("taphold", function( event ) { ... } )
Bien qu'il ne semble assez de simple à mettre en œuvre sur votre propre avec un délai d'attente et deux gestionnaires d'événements de la souris, il devient un peu plus compliqué lorsque l'on considère des cas comme un clic-glisser version, supportant à la fois la presse et à long presse le même élément, et de travailler avec les appareils tactiles comme l'iPad. Je fini par utiliser le longclick plugin jQuery ( Github ), qui se charge de ce genre de choses pour moi. Si vous avez seulement besoin de soutien appareils à écran tactile tels que les téléphones mobiles, vous pouvez également essayer jQuery Mobile événement taphold .
plugin jQuery. Il suffit de mettre $(expression).longClick(function() { <your code here> });
. Le second paramètre est la durée attente; délai d'attente par défaut est de 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);
long presse-événement (0.5k pur JavaScript) pour résoudre cela, il ajoute un événement long-press
au DOM.
Ecouter un long-press
sur tout élément :
// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
Ecoutez un long-press
sur spécifique élément:
// 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);
});
Travaux dans IE9 +, Chrome, Firefox, Safari et les applications mobiles hybrides (Cordova et ionique sur 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;
});
});
Pour les développeurs de plates-formes croisées (Note Toutes les réponses données à ce jour ne fonctionnera pas sur iOS) :
mouseup / bas semblait fonctionner bien sur Android - mais pas tous les appareils-à-dire (TAB4 samsung). Ça n'a pas marché du tout sur iOS .
Des recherches plus approfondies son semble que cela est dû à l'élément ayant la sélection et le grossissement natif interupts l'auditeur.
Cet écouteur d'événement permet une image miniature à ouvrir dans un modal d'amorçage, si l'utilisateur détient l'image pour 500ms.
Il utilise une classe d'image réactive montrant donc une version agrandie de l'image. Ce morceau de code a été entièrement testé sur (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 réponse du Diodeus est génial, mais il vous empêche d'ajouter une fonction onClick, il ne manquerez jamais fonction de maintien si vous mettez un onclick. Et la réponse de Razzak est presque parfait, mais il fonctionne la fonction de maintien que sur mouseup, et en général, la fonction fonctionne même si la participation est de garder l'utilisateur.
Alors, je me suis joint à la fois, et fait ceci:
$(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
});
vous pouvez définir le délai d'attente pour cet élément de la souris vers le bas et l'effacer de la souris jusqu'à:
$("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;
});
Avec ce chaque élément obtient son propre délai d'attente.
Pour les navigateurs modernes, mobiles:
document.addEventListener('contextmenu', callback);
https://developer.mozilla.org/en-US/ docs / Web / événements / contextmenu
Vous pouvez utiliser le taphold de jquery-mobile. Inclure les jquery-mobile.js et le code suivant fonctionnera correctement
$(document).on("pagecreate","#pagename",function(){
$("p").on("taphold",function(){
$(this).hide(); //your code
});
});
le plus élégant et propre est un plugin jQuery: https://github.com/untill/jquery.longclick/ , également disponible en packacke: https://www.npmjs.com/package/jquery.longclick .
En bref, vous l'utilisez comme ceci:
$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );
L'avantage de ce plug-in est que, contrairement à certaines des autres réponses ici, cliquez sur les événements sont encore possibles. Notez également qu'un clic long se produit, comme un clic long sur un dispositif, avant mouseup. Donc, c'est une fonctionnalité.
Pour moi, ce Travaillons avec ce code (avec 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);
Vous pouvez vérifier le temps d'identifier Cliquez ou Long Appuyez sur [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);
}
}
comme ça?
doc.addEeventListener("touchstart", function(){
// your code ...
}, false);
Vous pouvez utiliser jquery
événements tactiles. ( voir ici )
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 );
});
Je besoin de quelque chose pour les événements de clavier LongPress, donc je l'ai écrit cela.
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;
});