用途
新着
履歴
分類

jQuery 長押しで発動

jQuery 長押しで発動

クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。

このサンプルではボタンに触れて2秒後に設定しています。

以下のボタンを長押ししてください。

ボタン
長押し完了

隠れている要素が表示されます。

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>

しかし、これだけだ軽く触れた人には、長押しで何か起こることが伝わりません。

そこでもう一手間。

ボタン
長押し完了

このようにすれば、長く押せば何か起こることが伝わります。

JS

//PC
	$("#p2").mouseup(function(){
		clearInterval(timer1);
		$("#p2").removeClass("a2");
        $("#res2").hide();
	}).mousedown(function(){
		$("#p2").addClass("a2");	
	    timer1 = setTimeout(function(){
	        $("#res2").slideDown();
	    },2000);
	});

//スマホ
	$('#p2').bind('touchend', function() {
		clearInterval(timer1);
		$("#p2").removeClass("a2");
        $("#res2").hide();
	});
	$('#p2').bind('touchstart', function() {
		$("#p2").addClass("a2");	
	    timer1 = setTimeout(function(){
	        $("#res2").slideDown();
	    },2000);
	});

HTML

<div id="p2" class="demo_btn">ボタンdiv>
<div id="res2">長押し完了div>

背景の高さを2倍にして、グラデーションを利用してアニメーションしています。

気づいてもらう一手間のご参考に。

公開 2019-07-28 04:12:53
このページの二次元コード
jQuery 長押しで発動

人気のサンプル

search -  category -  about
© 2024 kipure
Top