35

2 secondsユーザーがdivを押したときにいくつかの関数を実行したいと思います。

出来ますか ？

これがdivのクリックを検出するための私のコードです

$('div').mousedown(function() {

});
4

12 に答える 12

39

2秒間のマウスダウン後にのみクリックが発生するようにするスロットルを追加します。

var timer;
$('div').on("mousedown",function(){
    timer = setTimeout(function(){
        alert("WORKY");
    },2*1000);
}).on("mouseup mouseleave",function(){
    clearTimeout(timer);
});

編集：マウスが要素を離れてからmouseupをトリガーした場合、タイマーが停止しないため、mouseleaveも追加しました。

于 2013-01-29T16:00:05.217 に答える
31

との両方mousedownを見てmouseup、差を計算するだけです。これが例です。

(function() { 

    // how many milliseconds is a long press?
    var longpress = 3000;
    // holds the start time
    var start;

    jQuery( "#pressme" ).on( 'mousedown', function( e ) {
        start = new Date().getTime();
    } );

    jQuery( "#pressme" ).on( 'mouseleave', function( e ) {
        start = 0;
    } );

    jQuery( "#pressme" ).on( 'mouseup', function( e ) {
        if ( new Date().getTime() >= ( start + longpress )  ) {
           alert('long press!');   
        } else {
           alert('short press!');   
        }
    } );

}());
于 2013-01-29T16:01:20.143 に答える
3

この質問が出されてから2年間で、jQueryFingerと呼ばれる素晴らしいプラグインが発明されました。

http://ngryman.sh/jquery.finger/

$('div').on('press', function(e) {
    console.log(this, e);
});
于 2015-04-09T01:09:25.447 に答える
3

この質問は今ではかなり古いものですが、私はこのようなものを探していて、Buleyの答えが私が必要としているものに近いことがわかりました。Androidのロングタッチのように、マウスを上げなくても機能するように、これまでに行ったことを投稿すると思いました。

// Set the duration of the long press and declare a couple variables
var longpress = 1000;
var start;
var divMouseDown;                       

// Check for mousedown on the element of choice
$("#element").on('mousedown', function(e){
  // Get the time it was clicked
  start = new Date().getTime();

  // See if mouse is still being held down after the longpress duration
  divMouseDown = setTimeout(function(){
    // What we want to happen when mouse is clicked and held for 1 second
  }, longpress);

  // If the mouse leaves the element or is released before the long touch event, 
  // reset variables and stop the function from triggering          
  $("#element").on('mouseup mouseleave', function(){
    if (divMouseDown) {
      clearTimeout(divMouseDown);
    }
    start = 0;
    e.stopPropagation();
  } );

} );
于 2016-03-07T16:33:25.923 に答える
3

ショートクリックおよびロングクリックイベント-長押しでの短押しの防止

//from e-OS menu script
var longpress = 800;
var start;
var timer;

//short press - show e-OS system menu
//long press - show e-OS settings
$( "#e-OS-menu" ).on( 'mousedown', function( e ) {
    start = new Date().getTime();
    timer = setTimeout(function(){ console.log('long press!'); }, longpress)
}).on( 'mouseleave', function( e ) {
    start = 0;
    clearTimeout(timer);
}).on( 'mouseup', function( e ) {
    if ( new Date().getTime() < ( start + longpress )  ) {
       clearTimeout(timer);
       console.log('short press!');   
    }
});
于 2017-08-04T01:24:27.000 に答える
2

次のコードを使用できます（JSFiddleでテスト済み）。

$('#foo').mousedown(function(){
   $(this).data('lastPressed', new Date().getTime());
}).mouseup(function(){
    var lastPressed = $(this).data('lastPressed');
    if (lastPressed){
        var duration = new Date().getTime() - lastPressed;
        $(this).data('lastPressed', false);
        if (duration > 2000) {
            alert('Your click lasted more than 2 seconds.');
        } else {
            alert('Your click lasted less than 2 seconds.');
        }
    }
}).mouseout(function(){
    $(this).data('lastPressed', false);
});
于 2013-01-29T16:04:44.817 に答える
2

EditorとKevinBの応答をアップグレードしてマージすると、完全に機能するマルチdiv、ホールドキャッチャーを次のように使用できます。

    // Global delta msec timeout
    var delta = 1500;

    $("#foo").on('mousedown', function(event) {

        var thisElement = $(event.currentTarget);
        var deltaTimer = setTimeout(function(){

            console.log('long press!');
            thisElement.removeData('startTimestamp');
        }, delta);

        thisElement.data('startTimestamp', new Date().getTime());
        thisElement.data('timer', deltaTimer);
    }).on('mouseleave', function(event) {

        var thisElement = $(event.currentTarget);
        clearTimeout(thisElement.data('timer'));

        thisElement.removeData('startTimestamp');
        thisElement.removeData('timer');
    }).on('mouseup', function(event) {

        var thisElement = $(event.currentTarget);
        var startTimestamp = thisElement.data('startTimestamp');
        clearTimeout(thisElement.data('timer'));

        if (startTimestamp !== undefined && !isNaN(parseInt(startTimestamp))) {

            if (new Date().getTime() >= (startTimestamp + delta))
               console.log('long press!');
            else
               console.log('short press!');
        }

        thisElement.removeData('startTimestamp');
        thisElement.removeData('timer');
    });
于 2013-11-10T01:22:35.283 に答える
2

したがって、これは明らかに将来の長い道のりですが、これをまだやりたい人にとって、これを行うための非常にシンプルで非常にエレガントな方法は、clearTimeout関数をmouseup/mouseoutイベントと組み合わせることです。

$('#button').mousedown(function(){
   var timer = setTimeout(
   	() => {alert('long press occurred');}, 600
   );
}).mouseup(function(){
    clearTimeout(timer);
}).mouseout(function(){
    clearTimeout(timer);
});
#button {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button">press here</div>

于 2019-04-18T15:37:02.417 に答える
1

のおかげで、divのクリックを検出したときにタイムスタンプを取得できますmousedown。同様に、のおかげでクリックリリースを検出したときにタイムスタンプを取得できますmouseup。

次に、これら2つのタイムスタンプを比較する必要があります。2秒（または2000ミリ秒）より大きい場合は、関数を実行します。

于 2013-01-29T15:59:44.007 に答える
1

このソリューションは、設定した時間の後にアクションを実行します。また、押された要素をマウスに置いたままにすると、アクションがキャンセルされます。

var longpress={
        pressed:false,
        longpressed:false,
        presstime:1000
    };

$('#element').on( 'mousedown' , function( event ) {
        longpress.longpressed=false;
        longpress.pressed=true;
        longpress.timeout=setTimeout(function() {
            longpress.longpressed=true;
            //Long press action here!
        },longpress.presstime);
    }).on( 'mouseup' , function( event ) {
        clearTimeout(longpress.timeout);
        if (!longpress.longpressed && longpress.pressed) {
            longpress.pressed=false;
            //Short press action here!
        }
    }).on('mouseleave', function( event ) {
        clearTimeout(longpress.timeout);
        longpress.pressed=false;
    });
于 2014-01-14T14:26:54.363 に答える
1

単純。長い不必要なコーディングは必要ありません。

(function(){
    // how many milliseconds is a long press?
    var offset = 500;

    $(".button").on('mousedown', function(e){
        // holds the start time
        $(this).data('start',new Date().getTime());
        $(this).addClass("selected");
    }).on('mouseup', function(e){
        if (new Date().getTime() >= ($(this).data('start') + offset)){
            //alert('ur click lasted for over 2 secs');
            $(this).addClass("selected");
        }else{
            $(this).removeClass("selected");
        }
    }).on('mouseleave', function(e){
        start = 0;
        //you can add destroy lingering functions on mouse leave
    });

}());

http://jsfiddle.net/donddoug/8D4nJ/

于 2014-08-01T16:28:58.040 に答える
0

マウスがクリックして離れるときの時間差を計算できます。timestampクリックして離すと、buttonまたはdiv を使用してmousedownを取得できますmouseup

2 seconds単純なクリックと長押しを検出する例を次に示します。buttonここで私はプレスでやった。同様に、あなたは使用することができますdiv

$(document).ready(function () {

	var pressTime; // store the press time

	$("#pressHere").on('mouseup', function () {

		var holdTime = 2000; //2 milliseconds for long press

		if (new Date().getTime() >= (pressTime + holdTime))
			$("#status").text("It's a Long Press...");
		else
			$("#status").text("It's a Short Press...");
      
	}).on('mousedown', function () { // When Button Release
		
    pressTime = new Date().getTime();
    
	}).on('mouseleave', function () { 	// When Button Leave
		
    pressTime = 0;
    
	});

});
.input-bar-item {
    display: table-cell;
}
.button-item {
margin: 20px;
    width: 30%;
}
.width100 {
  width: 60%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 <div class="input-bar-item button-item">
      <button class="btn btn-info" id="pressHere">Press Me</button>
</div>
<div class="input-bar-item width100" id="status"></div>

于 2019-08-07T13:19:19.573 に答える