Simon Battersby

A user of my wife’s workshop page reported that they couldn’t click to expand a div – when they did it opened and then immediately closed again. Experimentation showed that in fact they were double clicking rather than single clicking – registering two click events in fact. My original code was:

$('h3 span a').click(function() {
    $(this).parent().parent().siblings(".event_hidden").slideToggle();
    return false;
});

When I started thinking about it, I couldn’t immediately see how to separate the two events – after all, a doubleclick is just two clicks, isn’t it? Fortunately jQuery provides an easy solution by using the event properties:

$('h3 span a').click(function(event) {
    if(event.detail==1){//activate on first click only to avoid hiding again on double clicks
        $(this).parent().parent().siblings(".event_hidden").slideToggle();
    }
    return false;
});

Edit 14 November 2010 Actually, problem not quite solved, since I found that IE8 and under (I don’t know about IE9) don’t recognise event.detail, and hence the code above prevents the slideToggle working entirely. Fortunately, neither does the doubleclick problem seem to affect these browsers, and hence I amended my code to:

$('h3 span a').click(function(event) {
    if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks
        $(this).parent().parent().siblings(".event_hidden").slideToggle();
    }
    return false;
});

Tags: jQuery