javascript双击问题

Question

我有一个幻灯片，其中有特定幻灯片的快速链接。然后幻灯片将从该点继续播放。问题是，如果我双击快速链接 - 当幻灯片继续播放时，它会跳过一张幻灯片（如果我三次单击它会跳过 2 张幻灯片）。

我认为这实际上是在函数运行时再次单击导致问题的问题，因为您可以通过在函数运行时快速单击其他链接来实现相同的问题。

这是我的代码

var images=new Array();
var locationToRevealCount=6;
var nextimage=2;
var t;
var doubleclick;

addIcons();

function addIcons() {
    while (locationToRevealCount>0) {
        $("#extraImageButtons").append('<img class="galleryButtons" src="http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png" alt="'+locationToRevealCount+'" />');
        images[locationToRevealCount]='http://www.tombrennand.net/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src="http://www.tombrennand.net/1a.jpg" />');
    $("#extraImageButtons img.galleryButtons[alt*='1']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    runSlides();
}

function runSlides() {
    clearTimeout(t);
    t = setTimeout(doSlideshow,3000);
}

function doSlideshow() {
    if($('.backgroundImage').length!=0)
        $('.backgroundImage').fadeOut(500,function() {
            $('.backgroundImage').remove();
            slideshowFadeIn();
        });
    else
        slideshowFadeIn();
}

function slideshowFadeIn() {
    if(nextimage>=images.length) 
        nextimage=1;

    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");

    $('.homeLeadContent').prepend($('<img class="backgroundImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
        nextimage++;
        runSlides();

    }));
}

$("#extraImageButtons img.galleryButtons").live('click', function() {
    nextimage=$(this).attr("alt");
    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $(this).attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    clearTimeout(t);
    doSlideshow();
});

......

<div class="homeLeadContent" style="width:965px;"></div>

<div id="extraImageButtons"></div>

Answer 1

双击仍然会触发两个单击事件...几乎总是如此，具体取决于浏览器（请参阅： Javascript疯狂：鼠标事件）。这就是为什么大多数人建议实现单击或双击事件，但不能同时实现两者。

如果您想同时检测双击，则需要对彼此接近的单击事件进行计时，并防止第二次单击，恢复第一次单击，然后调用双击事件。

听起来您实际上并不需要双击？只是能够在单击幻灯片链接时切换到该幻灯片而不是转发到下一张幻灯片吗？

Answer 2

如果您想完全禁用双击：

jQuery('.dblClickDisabled').bind('dblclick',function(e){
    e.preventDefault();
})

其中 .dblClickDisabled 是您要禁用双击的 DOM 元素。

如果您不打算使用双击事件，只需放置一个计时器来防止双击。
这个答案可能就是您正在寻找的：如何用jQuery处理click、dblclick分离中的定时器