jQuery：長いタップ（モバイル）の後にクリックイベントが発生しないようにする

Question

モバイルデバイスの場合、右クリックのようなアクションはないため、これを長押しする必要があります。

また、通常の「クリック」イベントが必要です。

長押しの処理では解決策が見つかりましたが、onClickリスナーを追加すると、長押しイベントが発生しただけでもonClickが発生します。

longTapイベントが発生したときにクリックイベントを防止するにはどうすればよいですか？ここで

はコード+の例です：

var c = console.log.bind(console); 
 

 
(function() { 
 
    $.fn.longTap = function(options) { 
 
     
 
     options = $.extend({ 
 
      delay: 1000, 
 
      onRelease: null 
 
     }, options); 
 
     
 
     var eventType = { 
 
      mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown', 
 
      mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup' 
 
     }; 
 
     
 
     return this.each(function() { 
 
      $(this).on(eventType.mousedown + '.longtap', function() { 
 
       $(this).data('touchstart', +new Date); 
 
      }) 
 
      .on(eventType.mouseup + '.longtap', function(e) { 
 
       var now = +new Date, 
 
        than = $(this).data('touchstart'); 
 
       now - than >= options.delay && options.onRelease && options.onRelease.call(this, e); 
 
      }); 
 
     }); 
 
    }; 
 
})(jQuery); 
 

 
$('.long-tap').longTap({ 
 
    delay: 1000, // really long tap 
 
    onRelease: function(e) { 
 
     c($(this).position(), e); 
 
     e.stopImmediatePropagation(); 
 
     e.preventDefault(); 
 
     alert('show context menu or something else:'); 
 
    } 
 
}); 
 

 
$('.long-tap').click(function(){ 
 
\t alert("click"); 
 
})

.test { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #DDD; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test long-tap"></div>

Answer 1

あなたは、右クリックイベントのためcontextmenuを使用することができます。

$(document).on("contextmenu",function(e){ 
    e.preventDefault(); 
    // do the stuff 
}); 

で指であなた長押しをあなたのモバイルデバイスは、コンテキストメニューが表示されます。 longtapイベントがクリックイベントハンドラのイベントターゲットに登録されている場合

Answer 2

そのようなことを行うには良い方法は、あなたが何ができるか、本当にありませんが、テストである。一般的には

$('.long-tap').click(function(){ 
    if ($(this).data('touchstart')) { 
     return; 
    } 

    ... 
}); 

、私はあなたの一般的なアプローチを考えますタッチスクリーンデバイス用のコンテキストメニューを実装する必要があります再考する必要があります。

運が良かった！