定番
新着
履歴

jQuery 長押しで発動

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倍にして、グラデーションを利用してアニメーションしています。

--気づいてもらう一手間のご参考に。
2018-12-11 07:44:39
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2019 kipure
Top