Как определить длительное нажатие на div в JQuery?

Ответ 1

Просто наблюдайте как mousedown, так и mouseup и вычисляйте разницу. Вот пример.

(function() { 

    // how many milliseconds is a long press?
    var longpress = 3000;
    // holds the start time
    var start;

    jQuery( "#pressme" ).on( 'mousedown', function( e ) {
        start = new Date().getTime();
    } );

    jQuery( "#pressme" ).on( 'mouseleave', function( e ) {
        start = 0;
    } );

    jQuery( "#pressme" ).on( 'mouseup', function( e ) {
        if ( new Date().getTime() >= ( start + longpress )  ) {
           alert('long press!');   
        } else {
           alert('short press!');   
        }
    } );

}());

Ответ 2

Добавьте дроссельную заслонку, которая разрешает щелчок только через 2 секунды после мыши.

var timer;
$('div').on("mousedown",function(){
    timer = setTimeout(function(){
        alert("WORKY");
    },2*1000);
}).on("mouseup mouseleave",function(){
    clearTimeout(timer);
});

Edit: я добавил mouseleave, потому что, если мышь покидает элемент, а затем вызывает mouseup, он не остановит таймер.

Ответ 3

В течение двух лет, с тех пор как был задан этот вопрос, был изобретен удивительный плагин под названием jQuery Finger:

http://ngryman.sh/jquery.finger/

$('div').on('press', function(e) {
    console.log(this, e);
});

Ответ 4

Я знаю, что этот вопрос сейчас довольно старый, но я искал что-то вроде этого и обнаружил, что ответ Бэйли близок к тому, что мне нужно. Я решил, что я опубликую то, что я сделал с ним, чтобы он работал без мыши, вроде Android longtouch.

// Set the duration of the long press and declare a couple variables
var longpress = 1000;
var start;
var divMouseDown;                       

// Check for mousedown on the element of choice
$("#element").on('mousedown', function(e){
  // Get the time it was clicked
  start = new Date().getTime();

  // See if mouse is still being held down after the longpress duration
  divMouseDown = setTimeout(function(){
    // What we want to happen when mouse is clicked and held for 1 second
  }, longpress);

  // If the mouse leaves the element or is released before the long touch event, 
  // reset variables and stop the function from triggering          
  $("#element").on('mouseup mouseleave', function(){
    if (divMouseDown) {
      clearTimeout(divMouseDown);
    }
    start = 0;
    e.stopPropagation();
  } );

} );

Ответ 5

События коротких и длинных нажатий - короткое нажатие предотвращается при длительном нажатии

//from e-OS menu script
var longpress = 800;
var start;
var timer;

//short press - show e-OS system menu
//long press - show e-OS settings
$( "#e-OS-menu" ).on( 'mousedown', function( e ) {
    start = new Date().getTime();
    timer = setTimeout(function(){ console.log('long press!'); }, longpress)
}).on( 'mouseleave', function( e ) {
    start = 0;
    clearTimeout(timer);
}).on( 'mouseup', function( e ) {
    if ( new Date().getTime() < ( start + longpress )  ) {
       clearTimeout(timer);
       console.log('short press!');   
    }
});

Ответ 6

Вы можете использовать следующий код (проверено в JSFiddle):

$('#foo').mousedown(function(){
   $(this).data('lastPressed', new Date().getTime());
}).mouseup(function(){
    var lastPressed = $(this).data('lastPressed');
    if (lastPressed){
        var duration = new Date().getTime() - lastPressed;
        $(this).data('lastPressed', false);
        if (duration > 2000) {
            alert('Your click lasted more than 2 seconds.');
        } else {
            alert('Your click lasted less than 2 seconds.');
        }
    }
}).mouseout(function(){
    $(this).data('lastPressed', false);
});

Ответ 7

Обновление и объединение редакторов и ответов Kevin B вы можете иметь полностью функциональные, многодисковые, удержание с помощью:

    // Global delta msec timeout
    var delta = 1500;

    $("#foo").on('mousedown', function(event) {

        var thisElement = $(event.currentTarget);
        var deltaTimer = setTimeout(function(){

            console.log('long press!');
            thisElement.removeData('startTimestamp');
        }, delta);

        thisElement.data('startTimestamp', new Date().getTime());
        thisElement.data('timer', deltaTimer);
    }).on('mouseleave', function(event) {

        var thisElement = $(event.currentTarget);
        clearTimeout(thisElement.data('timer'));

        thisElement.removeData('startTimestamp');
        thisElement.removeData('timer');
    }).on('mouseup', function(event) {

        var thisElement = $(event.currentTarget);
        var startTimestamp = thisElement.data('startTimestamp');
        clearTimeout(thisElement.data('timer'));

        if (startTimestamp !== undefined && !isNaN(parseInt(startTimestamp))) {

            if (new Date().getTime() >= (startTimestamp + delta))
               console.log('long press!');
            else
               console.log('short press!');
        }

        thisElement.removeData('startTimestamp');
        thisElement.removeData('timer');
    });

Ответ 8

Вы можете получить метку времени, когда вы обнаружите щелчок на div благодаря mousedown. Аналогично, вы можете получить отметку времени, когда вы обнаружите релиз клика с помощью mouseup.

Затем вам нужно сравнить эти две метки времени, если они больше 2 секунд (или 2000 миллисекунд), тогда вы выполняете свою функцию.

Ответ 9

Это решение выполняет действие после установленного вами времени. Он также отменяет действие, если вы оставите нажатый элемент с помощью мыши.

var longpress={
        pressed:false,
        longpressed:false,
        presstime:1000
    };

$('#element').on( 'mousedown' , function( event ) {
        longpress.longpressed=false;
        longpress.pressed=true;
        longpress.timeout=setTimeout(function() {
            longpress.longpressed=true;
            //Long press action here!
        },longpress.presstime);
    }).on( 'mouseup' , function( event ) {
        clearTimeout(longpress.timeout);
        if (!longpress.longpressed && longpress.pressed) {
            longpress.pressed=false;
            //Short press action here!
        }
    }).on('mouseleave', function( event ) {
        clearTimeout(longpress.timeout);
        longpress.pressed=false;
    });

Ответ 10

Simple. Нет необходимости в длинном ненужном кодировании.

(function(){
    // how many milliseconds is a long press?
    var offset = 500;

    $(".button").on('mousedown', function(e){
        // holds the start time
        $(this).data('start',new Date().getTime());
        $(this).addClass("selected");
    }).on('mouseup', function(e){
        if (new Date().getTime() >= ($(this).data('start') + offset)){
            //alert('ur click lasted for over 2 secs');
            $(this).addClass("selected");
        }else{
            $(this).removeClass("selected");
        }
    }).on('mouseleave', function(e){
        start = 0;
        //you can add destroy lingering functions on mouse leave
    });

}());

http://jsfiddle.net/donddoug/8D4nJ/

Ответ 11

Так что это, очевидно, долгий путь в будущем, но для людей, которые хотят сделать это до сих пор, очень простой и довольно элегантный способ сделать это - объединить функцию clearTimeout с событиями mouseup/mouseout:

$('#button').mousedown(function(){
   var timer = setTimeout(
   	() => {alert('long press occurred');}, 600
   );
}).mouseup(function(){
    clearTimeout(timer);
}).mouseout(function(){
    clearTimeout(timer);
});

#button {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button">press here</div>

Ответ 12

Мы можем рассчитать разницу во времени, когда мышь щелкнет и уйдет. Мы можем получить timestamp, когда вы щелкнете и отпустите button или div, используя mousedown и mouseup

Вот пример для обнаружения простого щелчка и долгого нажатия 2 seconds. Здесь я сделал с прессой button. Точно так же вы можете использовать div

$(document).ready(function () {

	var pressTime; // store the press time

	$("#pressHere").on('mouseup', function () {

		var holdTime = 2000; //2 milliseconds for long press

		if (new Date().getTime() >= (pressTime + holdTime))
			$("#status").text("It a Long Press...");
		else
			$("#status").text("It a Short Press...");
      
	}).on('mousedown', function () { // When Button Release
		
    pressTime = new Date().getTime();
    
	}).on('mouseleave', function () { 	// When Button Leave
		
    pressTime = 0;
    
	});

});

.input-bar-item {
    display: table-cell;
}
.button-item {
margin: 20px;
    width: 30%;
}
.width100 {
  width: 60%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 <div class="input-bar-item button-item">
      <button class="btn btn-info" id="pressHere">Press Me</button>
</div>
<div class="input-bar-item width100" id="status"></div>