href="javascript:display( this )"

**redkan** · 07/08/2009, 11h56

Bonjour,

Je souhaite passez l'élément "this" a une fonction javascript.

J'ai lu que ce n'était pas propre de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onClick="display(this)">

Cependant le code suivant ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:display(this)">

Qu'elle est la méthode la plus propre pour faire ce genre d'appel sachant que je ne souhaite pas que ma page se recharge. Je souhaiterais donc éviter ce genre de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="index.php" onClick="display(this)">

Merci.

**nod__** · 07/08/2009, 12h00

tout dépend de ce que tu veux.

Si dans ton <a> il n'y a pas de href (ou juste ton #) c'est crade. HTML possède un élement pour les interactions : <button>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="display(this)"></button>

la suite c'est d'attacher le gestionnaire d'évènement à partir de javascript et non pas dans le html en dur.

**SpaceFrog** · 07/08/2009, 12h28

utiliser une balise a pour declencher une fonction gène principalement au niveau de référencement et c'est çà éviter.
mieux vaut comme le dit nod utiliser un bouton

En cas de force majeure il faut tout de même inhiber le href avec un retunr false

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="display(this);return false;">

**redkan** · 07/08/2009, 13h50

En fait il s'agit d'un menu avec onglet qui me permet d'afficher/masquer des panels donc je trouve que l'utilisation de la balise <button> n'est pas vraiment adéquate.

Y a-t-il une raison logique à ce que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:display(this)">

renvoie un DOMElement et pas l'élément courant ?

**nod__** · 07/08/2009, 14h00

bah si ça renvoie l'élement courant, le <a> en question…

Montre le html de ton menu, normalement si c'est des catégorie de menu tu devrait utiliser un titre pour ces catégories, et mettre le onclick sur le titre en question.

Sinon t'as des bon scripts qui trainent pour faire bien ce genre de chose.

**redkan** · 07/08/2009, 14h08

Envoyé par nod__

bah si ça renvoie l'élement courant, le <a> en question…

Petite erreur de ma part ca ne renvoie pas un DOMElement mais un DOMWindow.

Envoyé par nod__

Montre le html de ton menu, normalement si c'est des catégorie de menu tu devrait utiliser un titre pour ces catégories, et mettre le onclick sur le titre en question.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul>
	<li><a href="javascript:display(this)"><span>Pannel 1</span></a></li>
	<li class="current"><a href="display(this)"><span>Pannel 2</span></a></li>
	<li><a href="javascript:display(this)"><span>Pannel 3</span></a></li>
</ul>

Envoyé par nod__

Sinon t'as des bon scripts qui trainent pour faire bien ce genre de chose.

La plupart des scripts que j'ai trouvé utilisent un href="#" onclick="display()".

Après le code pour afficher cacher il suffit juste de modifier le style.display.

Merci pour votre aide.

**SpaceFrog** · 07/08/2009, 14h12

et le href n'est toujours pas inhiber ...

# peut être compris par certains navigateurs comme une renvoi en haut de page (ancre par defaut) ...

**Bovino** · 07/08/2009, 14h20

Petite erreur de ma part ca ne renvoie pas un DOMElement mais un DOMWindow.

Oui, c'est normal, dans la notation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="display(this);return false;">

L'action se fait au niveau du onclick qui est une propriété de l'objet JavaScript réprésentant la balise HTML <a>, donc this fait référence à cet objet.
Dans la notation (que je déconseille vivement)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:display(this)">

L'action se fait au niveau de la pseudo-url du href, il n'y a donc pas de lien explicite avec l'objet JavaScript représentant la balise, donc le contexte est global et this référence l'objet le plus global du document, c'est-à-dire window

**redkan** · 07/08/2009, 14h43

On en revient donc à la première solution avec en plus l'inhibition (dont je n'ai pas vraiment compris l'utilité).

Hormis le problème de retour en haut de la page (ancre par défaut) cette méthode ajoute à l'url le "#" ce que je ne trouve pas très propre non plus.

Il existe donc que cette solution

.

Merci.