Empêcher la redirection avec confirm()

Bonjour,
Je souhaite pouvoir annuler la redirection lors du clic d'un lien par une pop-up confirm(). Je suis aller voir la discussion suivante :
http://www.developpez.net/forums/d15...ction-confirm/
Tout comme saninx, je dispose de différents boutons "supprimer". J'ai suivi les premiers conseils de micetf jusqu'au traitement du problème dans annulchq.js.

La pop-up s'affiche bien, mais lorsque je souhaite annuler, la redirection s'effectue quand même.

Je code en JEE, avec JSP et JSTL mais le problème vient du Javascript. Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Accès restreint</title>
	<link type="text/css" rel="stylesheet" href="<c:url value="/inc/form.css"/>" />
	<script type="text/javascript" src="inc/script.js"></script>
 
</head>
<body>
	<h1>Bonjour ${sessionScope.sessionUtilisateur.userName}, et bienvenue dans l accès restreint.</h1>
 
	<table>
		<tr><th>Identifiant</th> <th>Nom</th> <th>Mot de passe</th></tr>
		<c:forEach items="${utilisateurs}" var="utilisateur">
			<tr><td>${utilisateur.id}</td><td>${utilisateur.userName}</td><td>${utilisateur.userPassword}</td>
				<td class="action">
                        <a href="<c:url value="/accesRestreint/suppression2">
                                                        <c:param name="id" value="${ utilisateur.id }" />
                                                        <c:param name="classe" value="${ utilisateur.getClass() }"/>
                                        </c:url>"
                        	class="btnSuppr">
                            <img src="<c:url value="/inc/supprimer.png"/>" id="suppr" alt="Supprimer" />
                        </a>
 
            	</td>
            </tr>
		</c:forEach>
	</table>
	<script>
                var links = document.getElementsByClassName('btnSuppr');
                for (var i = 0; i < links.length; i += 1) {
                        links[i].addEventListener('click', function(e){
                            if (window.confirm("Valider annulation !")){
                                e.preventDefault();
                            }
                        });
                }
        </script>
 
</body>
</html>

Sinon voici un aspect de la page coté client :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Accès restreint</title>
	<link type="text/css" rel="stylesheet" href="/pro_jpa_gf3.1/inc/form.css" />
	<script type="text/javascript" src="inc/script.js"></script>
 
</head>
<body>
	<h1>Bonjour HIPPO, et bienvenue dans l accès restreint.</h1>
 
	<table>
		<tr><th>Identifiant</th> <th>Nom</th> <th>Mot de passe</th></tr>
 
			<tr><td>1</td><td>ASSISTANTE</td><td>azerty</td>
				<td class="action">
                                       <a href="/pro_jpa_gf3.1/accesRestreint/suppression2?id=1&classe=class+beans.EpUser"
                        	            class="btnSuppr">
                                            <img src="/pro_jpa_gf3.1/inc/supprimer.png" id="suppr" alt="Supprimer" />
                                       </a>
 
            	                </td>
                       </tr>
 
		       <tr><td>2</td><td>HIPPO</td><td>chocolat</td>
				<td class="action">
                                       <a href="/pro_jpa_gf3.1/accesRestreint/suppression2?id=2&classe=class+beans.EpUser"
                        	            class="btnSuppr">
                                            <img src="/pro_jpa_gf3.1/inc/supprimer.png" id="suppr" alt="Supprimer" />
                                       </a>
 
            	             </td>
                      </tr>
        </table>
	<script>
                var links = document.getElementsByClassName('btnSuppr');
                alert('hello hello !');
                for (var i = 0; i < links.length; i += 1) {
                        links[i].addEventListener('click', function(e){
                            if (window.confirm("Valider annulation !")){
                                e.preventDefault();
                            }
                        });
                }
        </script>
 
</body>
</html>

Merci de votre aide !