iPhone Safariの長押しイベントメモ #JavaScript

jQuery mobileには taphold という独自の長押しイベントがあるが、近いうちにiPhone/iPad Safari向けで似たようなものが必要になりそうなので、以下を参考にサンプル作成。

jQuery mobile Events
http://api.jquerymobile.com/category/events/
Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
http://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad

ChromeやAndroidなどで動作するかは不明（動かない可能性が高い）。
pressの反応が微妙。押下領域が小さいと特に。調整が必要かもしれない。
3D Touch を考慮してないので先々アレ。というか、独自イベントで頑張らず、標準イベントに寄せたほうがよい気もする。

press.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=300" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
/* 標準メニュー、短径選択をオフに */
body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
</style>
<script>
$(function(){
var $msg = $('.msg'), n=0;

$('a').on('touchstart',function(e){
  var $this=$(this), isPress = false, timer;
  $this.off('touchend').on('touchend',function(e){
    if (isPress){ return false; }
    clearTimeout(timer);    
  });
  timer = setTimeout(function(){
             isPress = true;
             $this.triggerHandler('press');
         }, 750);
});

// 実際のイベント定義
$('a').on({
  'click':function(e){ $msg.text('click'+(n++)); return false; },
  'press':function(){ $msg.text('press'+(n++)); }
});

});
</script>
</head>
<body>
<div class="msg">wait</div>
<a href="#">link</a>
</body></html>