Preventing double click on a link but can click on another link

Question

I have a series of links in tabular format, all connected with different ids. I need to prevent the double clicking of them to prevent the double execution of associated server code. However the user can click different links. I say this because I have come across the following solution:

$("a.button").one("click", function() {
    $(this).click(function () { return false; });
});

Which I believe stops clicking for the whole page, once one link is clicked which is too powerful. I like the class binding approach with the above, but a user should be able to click (singularly) any link.

Thoughts appreciated. Thanks.

EDIT

Currently trying:

<a class="dblclick" href="....

and

<script type="text/javascript">
    $("a.dblclick").dblclick(function (e) { return false; });
</script>

But does not seem to work. I am using Mozilla.

This works fine - called just once http://jsfiddle.net/HawwX/1/ — Shaunak D, Jul 02 '14 at 16:56
Apologies. Basically I have a link like Order/Delete/1 and another link might be Order/Delete/2 and double clicking on these at present tries to double delete the relevant record. So I want to ensure a single click, and then be able to single click on another link. — SamJolly, Jul 02 '14 at 16:57
@isherwood thanks for the link. Must have missed it. However I am unsure how I bind an anchor tag with multiple classes, or will a.button bind to class="fa fa-check-square-o button"? Thanks you for your help as well below. Greatly appreciated. — SamJolly, Jul 02 '14 at 17:24

isherwood · Answer 1 · 2019-05-27T20:02:52.433

7

This would add a class to the link when it's clicked the first time. The second time, when the class is present, the link would not function.

$("a.button").on("click", function(event) {
    event.preventDefault();

    if $(this).hasClass('clicked')) { 
        return false;
    } else {
        $(this).addClass('clicked').trigger('click');
    }
});

edited May 27 '19 at 20:02

answered Jul 02 '14 at 16:54

isherwood

58,414
16
114
157

1

I had to move the preventDefault() to INSIDE the hasClass method... – ganders Jul 24 '19 at 15:51

Geert-Jan · Answer 2 · 2014-07-02T17:55:34.510

Just use one as you started out with.

To clarify $("a.button").one(...) will register a click exactly once per element, which seems to be be what you want.

Afterwards we only need to take care of perhaps setting the clickhandler again, when the server is done processing.

//bootstrap
$("a.button").one("click", clickhandlerOnce);

function clickhandlerOnce(event) {

    var $that = $(this),
        url = "http://www.example.com"; 

    $.getJSON(url, function(result){
        //TODO: handle your result here. 
        //NOTE: take care of errors. 

        //since we're done now with the server processing, 
        //we may bind the handler again if needed. 
        $that.one("click", clickhandlerOnce);
    });
};

score 1 · Answer 3 · answered Jul 02 '14 at 16:54

Bit confused as to what you are trying to do.

Could you possibly remove the click event on the function that handles it? You can remove an event from an individual control with

$( "#foo").unbind( "click" );

So you could catch the initial click and then remove the handler.

$( "#foo" ).click(function(ev) {
  ev.preventDefault();
  $( "#foo").unbind( "click" );
});

The preventDeafault() call stops your form from submitting, just incase you are doing this within a form.

xecgr · Answer 4 · 2014-07-02T17:13:25.700

1

Try to set a flag in a element

$("a.button").on("click", function() {
    ev.preventDefault();
    if($(this).attr('data-clicked')){
        $(this).attr('data-clicked', true)
        return true
    }
    return false
});

edited Jul 02 '14 at 17:13

answered Jul 02 '14 at 16:54

xecgr

5,095
3
19
28

Better to use a valid attribute: `data-clicked`. – isherwood Jul 02 '14 at 16:59
suggeriment accepted :) – xecgr Jul 02 '14 at 17:14
Thanks for this. What would the anchor tag look like to make this code work? – SamJolly Jul 02 '14 at 17:45
Just a link with a class: ` – isherwood Jul 02 '14 at 18:30

score 1 · Answer 5 · answered Jul 02 '14 at 17:00

1

Try using double-click (http://api.jquery.com/dblclick/)

When you double click on a link, the click event will fire, then the double-click event. You can cancel the double-click event.

$("a.button").dblclick(function(e) { return false; });

answered Jul 02 '14 at 17:00

jloosli

2,461
2
22
34

I have tried this, and sadly am unable to get it to work. I have added my code into a new EDIT in my question. – SamJolly Jul 02 '14 at 17:43

Preventing double click on a link but can click on another link

5 Answers5