taphold event — jQuery Mobile

событие tapholdверсия добавлена: 1.0

Описание: Срабатывает после длительного, полного касания.

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

Событие jQuery Mobile taphold срабатывает после длительного, полного касания (также известного как длительное нажатие).

$.event.special.tap.tapholdThreshold (по умолчанию: 750) - Это значение определяет, как долго пользователь должен удерживать касание, прежде чем событие taphold будет вызвано на целевом элементе.

$.event.special.tap.emitTapOnTaphold (по умолчанию: true) - Это значение определяет, будет ли событие tap отправлено вместе с событием taphold.

Этот плагин расширяет встроенный метод jQuery. Если jQuery Mobile не загружен, вызов метода .taphold() может не завершиться ошибкой напрямую, так как метод всё ещё существует. Однако ожидаемого поведения не произойдёт.

Пример:

Простой пример захвата и обработки события taphold

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>taphold demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
  html, body { padding: 0; margin: 0; }
  html, .ui-mobile, .ui-mobile body {
    height: 85px;
  }
  .ui-mobile, .ui-mobile .ui-page {
    min-height: 85px;
  }
  #nav {
    font-size: 200%;
    width:17.1875em;
    margin:17px auto 0 auto;
  }
  #nav a {
    color: #777;
    border: 2px solid #777;
    background-color: #ccc;
    padding: 0.2em 0.6em;
    text-decoration: none;
    float: left;
    margin-right: 0.3em;
  }
  #nav a:hover {
    color: #999;
    border-color: #999;
    background: #eee;
  }
  #nav a.selected,
  #nav a.selected:hover {
    color: #0a0;
    border-color: #0a0;
    background: #afa;
  }
  div.box {
    width: 3em;
    height: 3em;
    background-color: #108040;
  }
  div.box.taphold {
    background-color: #7ACEF4;
  }
  </style>
</head>
<body>
 
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
 
<script>
$(function(){
  $( "div.box" ).bind( "taphold", tapholdHandler );
 
  function tapholdHandler( event ){
    $( event.target ).addClass( "taphold" );
  }
});
</script>
 
</body>
</html>

taphold

событие tapholdверсия добавлена: 1.0

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

Пример:

Демо: