If user clicks on one link then quickly on another, the second link's onclick doesn't fire. How do we avoid this?

Question

Hi there. Apologies for the title, I found it hard to define my question succintly and that was the best I could do. If someone wants to edit it to add a better title then please, be my guest.

Anyway, the question. We have on our webpage the capability for users to delete something. They do this by clicking on a delete link, something that looks something like:

<a href="http://localhost/a/path/remove-thing.html?ID=42" onclick="return confirm('Are you sure you want to remove this thing?');" >Remove this thing!</a>

Now, obviously, normally when the user clicks on that link they get a javascript confirm box which asks them to confirm that they want to delete the thing. If they click cencel, the onclick event is false and so the delete doesnt happen; if they click okay then it does.

My problem is that if the user clicks on another link in the page (to anywhere), then quickly clicks on the delete link before the first page loads, the javascript never gets fired, but the thing is deleted - when they clicked on "Remove this thing!" they fired off that URL instead of the one they originally clicked. Is there a way to avoid this? Are we doing the confirm 'wrong'? I assume it has something to do with the browser shutting off the javascript checking when you click the first link as it prepares to render a new page, but then still accepting a change in URL before the page has gone...

(This has been tested in Firefox 3.6 and confirmed a problem there. No other browsers tested yet.)

Answer 1

one way around this which would degrade a bit more gracefully would be something like:

1. create a separate confirmation page which these links send you to
2. use javascript to show the dialog, and if 'yes', send the user directly to the delete page

this way it works even without javascript, and should hopefully eliminate your issue

EDIT

if js will always be present, you can always have the default link be empty, and redirect the user after confirmation

Answer 2

You're really having a couple of problems. I think you would be better off taking a progressive enhancement approach.

What happens to your users if they don't have the JavaScript? I know that people rarely turn off JavaScript, but it's still a useful thing to consider. Without JavaScript, people will be deleting items without confirmation.

You're better off linking to a delete form that asks "Are you sure you want to delete X?" and has "Delete" and "Cancel" buttons. After the form submits or they press cancel, you can send them back to the original page. *

Now for the progressive enhancement: attach a click event handler to the "delete" link that pulls in the "are you sure?" form via AJAX or builds it from scratch. Have the form replace the delete link. If they click the "Delete" button, just submit the form as before. If they click cancel there's no need to reload the page - just remove the form and restore the original "delete" link.

* as an aside, make sure the form is a post form and that it has CSRF protection. If you don't know about CSRF attacks, definitely read up on them.