web-dev-qa-db-ja.com

Jqueryでdivの長押しを検出する方法は？

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

出来ますか ？

ここにdivのクリックを検出するための私のコードがあります

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

});
jquerytriggers
27
Steffi

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!');   
        }
    } );

}());
27
buley

2秒のマウスダウン後にのみクリックを許可するスロットルを追加します。

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

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

33
Kevin B

私はこの質問が今ではかなり古いことを知っていますが、このようなものを探していたところ、Buleyの答えは私が必要としていたものに近いことがわかりました。 Android longtouch。

// 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();
  } );

} );
3
Tim Howey

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

//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!');   
    }
});
3
Ondřej Golasowski

アップグレードとマージEditorおよびKevin Bを使用すると、完全に機能するマルチ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');
    });
2
user1492723

この質問が尋ねられてから2年で、jQuery Fingerという素晴らしいプラグインが発明されました。

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

$('div').on('press', function(e) {
    console.log(this, e);
});
2
Thomas Hunter II

シンプル。長くて普遍的なコーディングは必要ありません。

(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/

1
Douglas David

したがって、これは明らかに将来的には長い道のりですが、まだこれをやりたい人にとっては、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>
1
Michael W

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

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

1
AnthonyLeGovic

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

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;
    });
1
PaRoxUs

マウスがクリックして離れるときの時間差を計算できます。 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>
0
Nishal K.R