Длинный пресс в JavaScript?

Question

Можно ли реализовать «длинный пресс» в JavaScript (или jQuery)? Как?

_{(источник: 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

Не существует «jQuery» Magic, просто таймеры 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

На основании ответа Maycow Moura, я написал это. Он также гарантирует, что пользователь не проделал щелчок правой кнопкой мыши, который заставит длительный пресс и работает на мобильных устройствах. Демонстрация

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

Вы также должны включать некоторые индикатор с использованием анимации 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

Вы можете использовать Tapolt. Событие jQuery Mobile API.

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

Answer 4

Хотя он выглядит достаточно просто, чтобы реализовать самостоятельно с тайм-аутами и парой обработчиков событий мыши. И работа с сенсорными устройствами, такими как iPad. Я закончил использовать Плагин LongClick jQuery (Гадость), что позаботится об этом для меня. Если вам нужно только поддержать сенсорные устройства, такие как мобильные телефоны, вы также можете попробовать JQuery Mobile Tapold событие.

Answer 5

плагин jQuery. Просто поставить $(expression).longClick(function() { <your code here> });. Отказ Второй параметр содержит продолжительность; Тайм-аут по умолчанию составляет 500 мс.

(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

я создал длинный пресс-событие (0.5k чистый JavaScript) решить это, он добавляет long-press событие до DOM.

Слушать long-press на Любые элемент:

// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
  console.log(e.target);
});

Слушать long-press на специфический элемент:

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

Работает в IE9 +, Chrome, Firefox, Safari & Hybrid Mobile Apps (Cordova & Ionic на iOS / Android)

Демонстрация

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

Демонстрация

Answer 8

Для поперечных разработчиков платформы (Обратите внимание на все ответы, данные до сих пор не будут работать на iOS):

Мышцы / вниз, казалось, работали хорошо на андроид - Но не все устройства IE (Samsung Tab4). Вообще не работал на Иос.

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

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

Поэтому он использует адаптивный класс изображения, показывающий большую версию изображения. Этот кусок кода был полностью проверен (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

Ответ диоде потрясающий, но он предотвращает добавление функции onclick, она никогда не будет запустить функцию удержания, если вы положите onclick. И ответ Razzak почти идеален, но он управляет функцией удержания только на мышке, и, как правило, функция работает, даже если пользователь продолжит удерживать.

Итак, я присоединился к обоим, так и сделал это:

$(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

Вы можете установить TimeOut для этого элемента на мышке вниз и очистить его на мышью вверх:

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

С этим каждый элемент получает свой тайм-аут.

Answer 11

Для современных мобильных браузеров:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-us/docs/web/events/contextMenu.

Answer 12

Вы можете использовать Tapolt of jQuery-Mobile. Включают JQuery-Mobile.js и следующий код будет работать нормально

$(document).on("pagecreate","#pagename",function(){
  $("p").on("taphold",function(){
   $(this).hide(); //your code
  });    
});

Answer 13

Самый элегантный и чистый это плагин jQuery:https://github.com/untill/jquery.longclick/, Также доступен как PackaCKE:https://www.npmjs.com/package/jquery.longclick..

Короче говоря, вы используете это так:

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

Преимущество этого плагина заключается в том, что, в отличие от некоторых других ответов здесь, Click Events все еще возможны. Обратите внимание, что длинный щелчок происходит, как долго нажатие на устройство, перед мышкой. Итак, это особенность.

Answer 14

Для меня это работает с этим кодом (с 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

Вы можете проверить время, чтобы определить щелчок или длинный Нажмите [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

так?

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

Answer 17

Вы можете использовать jquery Сенсорные события. (посмотреть здесь)

  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

Мне нужно что-то для ложной клавиатуры, поэтому я написал это.

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