javascript双击问题答案

【问题标题】：javascript double click problemjavascript双击问题
【发布时间】：2015-09-20 05:47:41
【问题描述】：

我有一个幻灯片，其中包含指向特定幻灯片的快速链接。然后幻灯片从该点继续。问题是如果我双击一个快速链接 - 当幻灯片继续播放时它会跳过一张幻灯片（如果我点击高音它会跳过 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>

【问题讨论】：

标签： javascript jquery double-click

【解决方案1】：

双击仍然会触发两个单击事件...几乎一直都是，具体取决于浏览器（请参阅：Javascript Madness: Mouse Events）。这就是为什么大多数人建议实现单击或双击事件，但不能同时实现。

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

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

【讨论】：

认为我可能措辞错误...我不希望能够双击...这是函数运行时第二次（及后续）单击的问题。跨度>
@Tom 你有一个页面我们可以看到这个工作/看到问题吗？

【解决方案2】：

如果要完全禁用双击：

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

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

如果您不打算使用双击事件，只需放置一个计时器以防止双击。这个答案可能就是你要找的：How can jQuery be used to handle timer in click, dblclick separation

【讨论】：

听起来很棒……但是怎么样？我已经把自己绑在这个结上，无法解决。