クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。
このサンプルではボタンに触れて２秒後に設定しています。
以下のボタンを長押ししてください。
ボタン
長押し完了
隠れている要素が表示されます。
JSはこちら
//PC
$("#p1").mouseup(function(){
clearInterval(timer1);
$("#res1").hide();
}).mousedown(function(){
timer1 = setTimeout(function(){
$("#res1").slideDown();
},2000);
});
//スマホ
$('#p1').bind('touchend', function() {
clearInterval(timer1);
$("#res1").hide();
});
$('#p1').bind('touchstart', function() {
timer1 = setTimeout(function(){
$("#res1").slideDown();
},2000);
});<div id="p1" class="demo_btn">ボタンdiv>
<div id="res1">長押し完了div>しかし、これだけだ軽く触れた人には、長押しで何か起こることが伝わりません。
そこでもう一手間。
ボタン
長押し完了
このようにすれば、長く押せば何か起こることが伝わります。
