Appui Long en JavaScript?

Sur la base de la réponse de Maycow Moura, j'ai écrit ceci. Il garantit également que l'utilisateur n'a pas fait un clic droit, ce qui déclencherait un appui long et fonctionne sur les appareils mobiles. démo

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 devriez é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 jQuery mobile API.

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

Bien qu'il semble assez simple à mettre en œuvre par vous-même avec un délai d'attente et quelques gestionnaires d'événements de souris, il devient un peu plus compliqué lorsque vous considérez des cas comme click-drag-release, supportant à la fois press et long-press sur le même élément, et travailler avec des appareils tactiles comme l'iPad. J'ai fini par utiliser le plugin longclick jQuery (Github), qui s'occupe de ce genre de choses pour moi. Si vous avez seulement besoin de prendre en charge les appareils à écran tactile comme les téléphones mobiles, vous pourriez essayez également l'événement jQuery Mobile taphold .

Plugin JQuery. Juste $(expression).longClick(function() { <your code here> });. Le deuxième paramètre est la durée d'attente; le 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);

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

DÉMO

Utilisez appui long (0.5 k JavaScript pur) , Il ajoute un événement long-press au DOM.

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

Écouter un long-press sur spécifiques é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);
});

fonctionne dans IE9+, Chrome, Firefox, Safari et applications mobiles hybrides (Cordova et Ionic)

Démo

Pour les développeurs multi-plateformes (notez que toutes les réponses données jusqu'à présent ne fonctionneront pas sur iOS):

Mouseup / down semblait fonctionner correctement sur android - mais pas tous les appareils ie (Samsung tab4). N'a pas fonctionné du tout sur iOS .

D'autres recherches semblent que cela est dû au fait que l'élément a une sélection et que le grossissement natif interrompt l'auditeur.

Cet écouteur d'événement permet d'ouvrir une image miniature dans un modal bootstrap, si l'utilisateur image pour 500ms.

Il utilise une classe d'image réactive montrant donc une version plus grande 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 de Diodeus est géniale, mais elle vous empêche d'ajouter une fonction onClick, elle ne fonctionnera jamais avec la fonction hold si vous mettez un onclick. Et la réponse du Razzak est presque parfaite, mais elle ne fonctionne que sur mouseup, et généralement, la fonction s'exécute même si l'Utilisateur continue à tenir.

Donc, j'ai rejoint les deux, 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 sur la souris vers le bas et l'effacer sur la souris:

$("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 cela, chaque élément obtient son propre délai d'attente.

Pour les navigateurs mobiles modernes:

document.addEventListener('contextmenu', callback);

Https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu

Vous pouvez utiliser taphold de jQuery-mobile. Inclure le jQuery-mobile.js et le code suivant fonctionneront bien

$(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/, aussi disponible en packacke: https://www.npmjs.com/package/jquery.longclick.

Bref, vous l'utilisez comme ceci:

$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );

L'avantage de ce plugin est que, contrairement à certaines autres réponses ici, cliquez sur événements sont encore possibles. Notez également qu'un clic long se produit, tout comme un long robinet sur un appareil, avant mouseup. Donc, c'est une caractéristique.

Pour moi, c'est le travail 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 de l'identifier, Cliquez ou Appuyez longuement 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);