jquery - javascript double click problem - Stack Overflow

admin2025-04-19 0

I have a slideshow which has quick links to the specific slides. The slideshow then continues from that point. The trouble is if I double click on a quick link - when the slideshow continues it skips a slide (if I treble click it skips 2).

I think it's actually a problem with clicking again while the functions are running that's causing the problem as you can achieve the same problem by quickly clicking on other links while the functions are running.

Here's the code I have...

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=".png" alt="'+locationToRevealCount+'" />');
        images[locationToRevealCount]='/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src=".jpg" />');
    $("#extraImageButtons img.galleryButtons[alt*='1']").attr("src",".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",".png");
    $("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src",".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",".png");
    $(this).attr("src",".png");
    clearTimeout(t);
    doSlideshow();
});

...

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

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

Here's the code I have...

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/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src="http://www.tombrennand/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>

Share edited Mar 30, 2011 at 16:46 Martin Hennings 16.9k9 gold badges50 silver badges70 bronze badges asked Mar 30, 2011 at 16:42 Tom 13k50 gold badges153 silver badges247 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Double click still fires two single click events... well almost all the time, depending on the browser (see: Javascript Madness: Mouse Events). This is why most remend implement either single click or double click events but not both.

If you want to detect double clicks at the same time you'll need to get into timing click events proximity to each other and preventing the second, reverting the first, and calling a double click event instead.

It sounds like you don't actually need double clicks though? Just the ability to -when clicking on a slide link- switch to that slide instead of forwarding to the next slide?

If you want to plete disable doubleclick:

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

Where .dblClickDisabled is the DOM-element that you want to disable double-click on.

If you aren't going to use a double click event, just put a timer to prevent a double click. This answer might be what you are looking for: How can jQuery be used to handle timer in click, dblclick separation

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745072464a283366.html

jqueryjavascript double click problemStack Overflow

最新回复(0)