Preventing Double Clicks on image map areas

Question

I have a basic image map that executes a javascript/jquery routine when an area is clicked. At the moment, the DoStuff() method is executed twice if the area is double-clicked. Can anyone provide a method that will prevent double execution in a double-click scenario?

<img src="images/myimage.png" border="0" usemap="#Map1" />
<map name="Map1">
    <area coords="5,115,97,150" href="javascript:void(0);" onclick="DoStuff()">
    <area coords="104,116,199,149" href="javascript:void(0);" onclick="DoStuff()">
</map>

A pretty basic and brute force method would be to just add a timer/interval within DoStuff() and check if an appropriate amount of time has passed before you would like to allow it to run again. — DigTheDoug, Oct 02 '13 at 15:19

Oliboy50 · Accepted Answer · 2013-10-02T15:31:32.873

3

Use a boolean flag.

var hasBeenClicked = false;

// Your code...

if(!hasBeenClicked){
    hasBeenClicked = true;

    // My routine

    setTimeout(function(){ // McPhelpsius's idea (wait for 1sec before we can click again)
        hasBeenClicked = false; // My routine is over, we can click again
    }, 1000);
 } else {
    // do nothing 
 }

edited Oct 02 '13 at 15:31

answered Oct 02 '13 at 15:19

Oliboy50

2,482
3
23
33

what about setTimeout(1000)? That might be useful for adding a full second in between the time that it is clickable. – McPhelpsius Oct 02 '13 at 15:26
Edited. Thanks for the idea – Oliboy50 Oct 02 '13 at 15:32

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

If you're using jQuery you can include this at the top of the click handler. On click it will disable the element which stops any click events from happening.

function DoStuff() {
    $('[name="Map1"]').prop('disabled', true);
    //Do Stuff..
}

This explains some other options depending on your jQuery version.

edited May 23 '17 at 11:52

Community

1
1

answered Oct 02 '13 at 15:19

mmcclannahan

1,392
1
9
34

Just tried it and it does not prevent the double execution... I am calling window.open in this method and I always get two windows opening. – JoeGeeky Oct 02 '13 at 15:29

Preventing Double Clicks on image map areas

2 Answers2