Appuyez longuement sur JavaScript?

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; 
});

Answer 1

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; 
});

Answer 2

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; }
}

Answer 3

Vous pouvez utiliser taphold cas de l'API jQuery mobile.

jQuery("a").on("taphold", function( event ) { ... } )

Answer 4

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 .

Answer 5

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);

Answer 6

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)

Démo

Answer 7

$(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;
    });
});

DEMO

Answer 8

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)
});

Answer 9

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
});

Answer 10

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.

Answer 11

Pour les navigateurs modernes, mobiles:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-US/ docs / Web / événements / contextmenu

Answer 12

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
  });    
});

Answer 13

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é.

Answer 14

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);

Answer 15

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);
}
} 

Answer 16

comme ça?

doc.addEeventListener("touchstart", function(){
    // your code ...
}, false);    

Answer 17

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 );
  });

Answer 18

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;
});