0

「本文」をクリックするたびに、カーソルの下に小さなアニメーションをバインドしようとしています: http://jsfiddle.net/Nippon/pARR3/

var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);

$('html').click(function(e){
    e.preventDefault();
      $(".click").addClass("clickOn");
      clearTimeout(timeoutHandle);
      setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
    });

問題は、同じクリックで addClass を削除する方法がわからないことです。今のところ setTimeout を使用していますが、クリックが遅く、ダブルクリックが発生しないように機能しています。狂ったようにクリックし始めると、アニメーションが地獄に落ちます。

誰かが私が作ったこの混乱を片付けて、それをスムーズ/ダブルクリック防止にするのを手伝ってくれませんか?

4

3 に答える 3

3

私は少し違うアプローチを取りました。クリックごとに新しい要素を作成しました。次の 2 つのオプションがあります。

http://jsfiddle.net/kxJkK/

$(document).bind('mousemove', function (e) {
    $('#clickWrapper').css({
        left: e.pageX - 20,
        top: e.pageY - 20
    });
});

$('html').click(function (e) {
    e.preventDefault();
    var $div = $('<div class="click"></div>')
        .appendTo('#clickWrapper')
        .addClass('clickOn');

    setTimeout(function () {
        $div.remove();
    }, 1000);
});

http://jsfiddle.net/KTdN7/

var left;
var top;

$(document).bind('mousemove', function (e) {
    left = e.pageX - 20,
    top = e.pageY - 20
});

$('html').click(function (e) {
    e.preventDefault();
    var $div = $('<div class="click"></div>')
        .css({ top: top, left:left})
        .appendTo('#clickWrapper')
        .addClass('clickOn');

    setTimeout(function () {
        $div.remove();
    }, 1000);
});
于 2013-07-31T19:43:16.147 に答える
0

ダブルクリックを防ぐには、ハンドラを一時的に削除するだけです。後でマウスの動きの監視を一時的に停止することにした場合も、同じ手法を使用できます。 setTimeoutただし、ここでは必要です。あなたが直接使用するか、内部ライブラリを使用します。

$(document).bind('mousemove', function (e) {
    $('#clickWrapper').css({
        left: e.pageX - 20,
        top: e.pageY - 20
    });
});

function toggleBubble(state) {
    if (state) {
        $(".click").addClass("clickOn");
        $('html').off('click', showBubble);
        console.log("add");
    } else {
        $(".click").removeClass("clickOn");
        $('html').on('click', showBubble);
        console.log("rm");
    }
}

function showBubble(e) {    
    toggleBubble(true);
    setTimeout(toggleBubble.bind(null, false), 1000);

    return false;
}

$('html').on('click', showBubble);

更新されたフィドル

于 2013-07-31T19:50:34.870 に答える
0 
var timeoutHandle = setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);

$('html').click(function(e){
e.preventDefault();
  $(".click").addClass("clickOn").delay(1000).removeClass("clickOn");
  clearTimeout(timeoutHandle);
  setTimeout(function(){
$(".click").removeClass("clickOn");
}, 1000);
});

それはうまくいくはずです。c

于 2013-07-31T19:36:34.977 に答える