1

ボタンがあります。ユーザーがボタンを1回クリックしたか、長押ししたかに基づいて、さまざまな関数を呼び出したいと思います。

シングルクリックは問題なく動作しますが、ボタンを長押しすると、長押し機能が実行され、続いてシングルクリック機能が実行されます。

これが私が使用しているコードです。

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
timeout = setInterval(function(){
    clicker.text(count++);
}, 500);

return false;
});

$(document).mouseup(function(){
clearInterval(timeout);
return false;
});


clicker.click(function(){
$(this).css('background', 'red');
return false;
});

</ p>

このフィドルを参照してください：http：//jsfiddle.net/8FmRd/181/

最初の長押しで、divの色が赤に変わらないはずです。

4

6 に答える 6

3

http://jsfiddle.net/8FmRd/189/

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
    count = 0;
    timeout = setInterval(function(){
        clicker.text(count++);
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

clicker.click(function(){
    clearInterval(timeout);
    if (count < 1) {
        $(this).css('background', 'red');
    }
    return false;
});
于 2012-09-10T14:09:42.790 に答える
3

編集：何が起こるかというと、マウスアップなしで2回目のマウスダウンが発生すると、タイムアウト変数が上書きされます。これにより、最初の間隔が取り残され、永久にループします。これを修正するには、間隔がすでに進んでいるかどうかを追跡し、すでに進んでいる場合はマウスダウンを無効にします。これは、使用するマウスボタンに関係なく機能します。

元の例とGustonezによって提供されたソリューションはどちらも、左クリックを押した途中で右クリックしてから両方を離すと、タイマーが実行され続けるというわずかなバグがあるようです。これは、右クリックでもマウスダウンイベントがトリガーされるためだと思いますが、表示されるコンテキストメニューによってマウスアップが溺れています。いずれにせよ、右クリックでマウスダウンを無効にすることでこれを解決できます。（右クリックはelement.which値3で示されます）

var timeout, clicker = $('#clicker');
var count = 0;
var active = false;

clicker.mousedown(function(e){
    if (active) {
        return false;
    }

    timeout = setInterval(function(){
        clicker.text(count++);
        $(this).css('background', 'orange')
    }, 500);

    active = true;

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    active = false;
    return false;
});


clicker.click(function(){
    clearInterval(timeout);
    active = false;
    return false;
});

JSFiddle： http: //jsfiddle.net/8FmRd/634/

于 2014-11-14T14:54:24.453 に答える
1

削除clicker.clickし、mouseupイベントでカウントを確認します。次に例を示します。

$(document).mouseup(function(){
   clearInterval(timeout);
   if(count < 2) {
      $(this).css('background', 'red');
   }
   return false;
});

ボタンを押している時間に関係なく、クリックが発生します。また、mousedownで開始クリック時間を取り、mouseupイベントの違いを確認し、違いがXミリ秒未満の場合にのみ背景を変更することができます。

于 2012-09-10T14:09:06.813 に答える
1

クリッカー機能を次のように更新するだけです

clicker.click(function() {
    if(clicker.text() < 1) {       
       $(this).css('background', 'red');
    }
   return false;
});​

これがjsFiddlehttp : //jsfiddle.net/8FmRd/187/です。

于 2012-09-10T14:11:31.370 に答える
1

FAngelが指摘したように、開始と終了の違いを使用して、他の回答がすでに投稿されている間にコードを記述することもできます：P：

jsfiddle

var timeout,
    timerStart,
    timerEnd,
    count = 0,
    interval = 500;

$(document).on({
    mousedown: function() {
        timerStart = new Date().getTime();

        var $clicker = $(this);
        timeout = setInterval(function(){
            $clicker.text(count++);
        }, interval);
        return false;
    },
    mouseup: function() {
        timerEnd = new Date().getTime();
        clearInterval(timeout);

        if(timerEnd - timerStart < interval) {
            $(this).css('background', 'red');
        }
        return false;
    }
}, '#clicker');
于 2012-09-10T14:17:25.297 に答える
0

mousedownイベントの要素にいくつかのデータを添付し、クリックイベントでそれを確認します。これが例です。

于 2012-09-10T14:10:38.333 に答える