Bloquer tous les liens d'une page web

Bonjour, mon objectif est le suivant :
Lors de l'execution d'un script (qui peut prendre du temps), il faut que les liens hypertextes soient bloqués, ainsi que signaler à l'utilisateur qu'un traitement est en cours (modifier le pointeur de la souris, etc...)

j'ai écrit les fonctions bloquer(objet) et debloquer(objet) qui activent/désactivent le lien "objet" et ça marche

Maintenant, je voudrais qu'au lieu de définir le lien à modifier, les fonctions s'appliquent à tous les liens hypertexte de la page et ce pour empêcher l'utilisateur de changer de page pendant l'exécution d'un script (je l'ai mit sur des boutons pour l'instant)

voici les codes :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript" src="bloquer.js"></script> PAGE 1 </br> <a href="page2.html" id="p2">page 2</a> </br> <a href="page3.php" id="p3"> page 3 </a> </br> <a href="testmysql.php" id="testmysql"> testmysql </a> </br> <button onclick="bloquer(p2);"> BLOQUER </button> <button onclick="debloquer(p2);"> DEBLOQUER</button>

---

Code:

---

1 2 3 4 5 6 7 8

function bloquer(objet){ var href; href = (objet.nodeName.toLowerCase() == 'a') ? objet.getAttribute("href") : null; if(href && href != null){ objet.setAttribute("href_back", href); objet.removeAttribute("href"); } }

---

Code:

---

1 2 3 4 5 6 7

function debloquer(objet){ var href; href= objet.getAttribute("href_back"); if(href && href != null){ objet.setAttribute("href", href); } }

---

merci de votre aide

En javascript, ça me paraît compliqué, mais si l'utilisation de jquery ne t'es pas interdite en tout cas c'est hyper simple :

Code:

---

1 2 3

$('a').click(function() { return false; });

---

Citation:

---

Envoyé par Spartacusply

En javascript, ça me paraît compliqué

---

Non, pas particulièrement en fait, mais il faut faire soi-même la boucle sur tous les éléments souhaités (ici, les balises <a>) que jQuery fait en interne.

Code:

---

1 2 3 4 5 6

var $liens = document.getElementsByTagName('a'), nbLiens = $liens.length; while(nbLiens--){ $liens[nbLiens].onclick = function(){ return false; } }

---

Alors c'est sûr qu'on a trois ou quatre lignes de code en plus, mais on économise toutes celles de jQuery. ;)

J'ai téléchargé et placé la bibliothède jquery avec mes autres fichiers

j'ai donc ceci qui marche bien c'est ce que je voulais faire:

Code:

---

1 2 3 4 5 6

function bloquer2(){ $('a').click( function() { return false; }); }

---

la syntaxe est particulière je trouve

Aussi, je dois maintenant faire la fonction inverse qui soit réactive tous les liens ou annule bloquer2()

j'ai essayé avec return true, fonction vide, ou pas de paramètre dans click, cela ne semble pas être la manière de faire
Mes compétences en js sont très limitées
--

Code:

---

1 2 3 4 5 6

var $liens = document.getElementsByTagName('a'), nbLiens = $liens.length; while(nbLiens--){ $liens[nbLiens].onclick = function(){ return false; } }

---

ce code me conviendrait aussi, il faudrait que je sache faire l'inverse dans une autre fonction


Merci

C'est normal, car ta première fonction (qui retourne false) est toujours exécutée même après avoir déclaré une autre fonction au click. Il est nécessaire de "détacher" l'évènement pour pouvoir le réécrire entièrement.

Code:

---

1 2 3 4 5 6 7

function debloquer() { $('a').unbind("click"); $('a').click( function() { return true; }); }

---

Merci, cela fonctionne bien.




Sinon, est ce possible d'agir sur le pointeur de la souris, faire en sorte qu'il passe en mode "chargement", ou autre
j'ai déjà mis des alert() pour prévenir les utilisateurs (en début de fonctions et lors d'un clic sur un lien bloqué), mais j'aimerais que l'exécution du traitement se voit facilement

merci !

Oui en faisant ceci :

Code:

---

1 2 3 4 5 6 7

function bloquer2(){ $('a').click( function() { return false; }); $('body *').css('cursor','wait!important'); }

---

Et en oubliant pas le sens inverse lorsque c'est terminé :

Code:

---

$('body *').css('cursor','default');

---

La console javascript ne trouve pas d'erreur mais le curseur reste identique

Edit : $('body *').css('cursor','wait'); met le curseur en forme de rond (comme quand un programme crash sur 7), cependant cela ne fonctionne que lorsque je survole les 2 boutons, et non la page toute entière

EDIT2 : non en fait ça fonctionne sur tous les élements cliquables, ce qui m'intéresse au final, mais wait!important ne fonctionne pas

merci beaucoup pour ton aide

On vient de me demander de faire la même chose avec les boutons, l'ennui c'est que je ne sais pas faire et je pense qu'en supprimant l'action du 'onclick' on ne puisse la rétablir après

de toute façon ça ne fonctionne pas :

Code:

---

$('blo').setAttribute("onclick", function() { return false; });

---

Code:

---

<button id='blo'onclick="bloquerLiens();"> BLOQUER LES LIENS</button>

---

Code:

---

1 2 3

Uncaught TypeError: undefined is not a function bloquerLiens.js:21 debloquerLiens bloquerLiens.js:21 onclick

---

Bonjour,

Citation:

---

var $liens = document.getElementsByTagName('a')

---

pourquoi ne pas utiliser la collection document.links disponible

Citation:

---

On vient de me demander de faire la même chose avec les boutons...

---

regarde en fait si l'application d'une DIV sur toute ta page, avec une légère opacité, ne serait pas préférable et plus facile à gérer !

Citation:

---

...je pense qu'en supprimant l'action du 'onclick' on ne puisse la rétablir après

---

dans ce cas il te faut la sauvegarder avant de la modifier.

Comme l'a dit NoSmoking, il y a un moyen beaucoup plus propre de faire ça : utiliser un overlay. Un <div> qui recouvre toute la page avec un z-index très élevé. Tous les clics atteignent cet overlay et non les liens en arrière-plan. D'ailleurs, bien souvent, cet overlay est un peu opaque et contient un message indicateur à l'utilisateur du genre "Veuillez patienter".

Il y a aussi une solution propre, mais qui bloquera les liens mais pas les events des liens, c'est de simplement mettre un event.preventDefault() sur l'event click de document.documentElement ou document.body

Pour finir je n'ai pas eu besoin de bloquer les boutons

voici mes fonctions pour ceux que ça pourrait interesser

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function bloquerLiens(){ alert("Les liens hypertextes seront désactivés le temps du traitement"); $('a').css('color','lightgray'); $('a').css('text-decoration','none'); $('a').click(function() {   alert("Les liens sont désactivés, un traitement est en cours"); return false; }); $('body *').css('cursor','wait'); $('blo').setAttribute('onclick', function() { return false; }); }   function debloquerLiens(){ alert("Traitement terminé, les liens sont réactivés");   $('a').css('color','default'); $('a').css('text-decoration','default'); $('a').unbind("click"); $('a').click(function(){}); $('body *').css('cursor','default'); $('blo').setAttribute("onclick", function() { return true; }); }

---

merci !