Premere a lungo in JavaScript?

Question

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

Answer 1

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

Answer 2

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

Answer 3

È possibile utilizzare taphold caso di jQuery API mobile.

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

Answer 4

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 .

Answer 5

plug-in

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

Answer 6

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)

Demo

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

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

Answer 9

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

Answer 10

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.

Answer 11

Per i browser moderni, telefoni:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-US/ docs / Web / Eventi / contextmenu

Answer 12

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

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

come questo?

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

Answer 17

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

Answer 18

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