Comment preventDefault sur les balises d'ancrage?
Disons que j'ai une balise d'ancrage tels que
<a href="#" ng-click="do()">Click</a>
Comment puis-je empêcher le navigateur de la navigation à # dans AngularJS ?
- Comme Chris dit ci-dessous, il suffit de laisser le
href
. - Ce n'est pas ce que Chris dit, Jesse, utilisez
href=''
de garder le pointeur de la souris comportement. - Vous venez de supprimer le signe # de href, c'est Ok.
- Ou simplement l'utiliser href="javascript:void(0);" pour garder le pointeur, mais n'ont aucune action (jusqu'à ce que vous ajoutez un autre gestionnaire de clic)
- Pourriez-vous s'il vous plaît changer accepté de répondre au mieux et le plus voté un par Chris – stackoverflow.com/a/11672909 ?
Vous devez vous connecter pour publier un commentaire.
Mise à JOUR: depuis, j'ai changé mon avis sur cette solution. Après plus de développement et le temps passé à travailler sur ce, je crois que la meilleure solution à ce problème est de faire ce qui suit:
Et ensuite mettre à jour votre
css
d'avoir une règle:Son beaucoup plus simple et offre exactement les mêmes fonctionnalités et est beaucoup plus efficace. Espérons que pourrait être utile à quelqu'un d'autre à la recherche de cette solution dans le futur.
Voici ma solution précédente, que je suis en partant d'ici, juste pour successorale:
Si vous rencontrez ce problème, une simple directive qui permettrait de résoudre ce problème est la suivante:
Il vérifie toutes les balises d'ancrage (
<a></a>
) pour voir si leurhref
attribut est une chaîne vide (""
) ou une table de hachage ('#'
) ou il y a unng-click
affectation. S'il en trouve une de ces conditions, il attire l'événement et empêche le comportement par défaut.Le seul inconvénient est qu'il fonctionne de cette directive, pour toutes les balises d'ancrage. Donc, si vous avez beaucoup d'ancre de tags sur la page et que vous souhaitez seulement à prévenir le comportement par défaut pour un petit nombre d'entre eux, alors cette directive n'est pas très efficace. Cependant, j'ai presque toujours envie de
preventDefault
, j'ai donc utiliser cette directive dans mon AngularJS apps.e.preventDefault()
bloque uniquement le comportement par défaut de l'événement click (qui est exactement ce que l'OP a été d'essayer de faire). Toutng-click
fonctions seront encore appelée lorsque l'événement click est déclenché.<a href ng-click="do()">
href
attribut comportement variable dans les différents navigateurs. Même si je suis d'accord c'est de loin le plus propre et le plus efficace de solution, elle a quelques croix-problèmes de navigateur. À l'aide de la directive approche permet au navigateur pour gérer les<a>
tag comme il le ferait normalement, mais encore obtenir l'OP la réponse qu'ils cherchaient.if(attrs.ngClick){ scope.$eval(attrs.ngClick); }
comme c'était le double tir de ma fonction de clic.a[ng-click] { cusor: pointer; }
en CSS car elle maintient les comportements (les liens vides ne pas obtenir le pointeur du curseur)a
ancre, AnguleJS déjà le remplacer pour gérer correctement la navigation avec $le service de localisation. Je ne pense pas que ce soit une bonne idée.if(attrs.ngClick && (attrs.href === '' || attrs.href === '#'))
. Remarque introduction d'autres parens.Selon la docs pour ngHref vous devriez être capable de laisser tomber le href, ou ne href="".
<a data-some-directive='lol'>click</a>
provoque toujours le navigateur de charger une nouvelle page.href="unsafe:"
.<a href ng-click="do()">still a link</a>
- le meilleur de deux mondes (pas par défaut de l'événement et vous obtenez toujours un pointeur.cursor: pointer
via CSS) par un congéhref=""
avec une valeur vide.Vous pouvez passer le $objet d'événement pour votre méthode, et d'appeler
$event.preventDefault()
sur elle, de sorte que le traitement par défaut n'aura pas lieu:$event.preventDefault()
... c'est à dire de l'impôt.ng-click="do(); $event.preventDefault()
par exemple... même si, il n'est pas nécessaire parce que @Chris réponse ci-dessous est la bonne. Cela peut aider les gens dans des situations où ils ont imbriquée ngClicks et ils veulent appeler$event.stopPropagation()
, cependant.Je préfère utiliser directives pour ce genre de chose. Voici un exemple
Et la directive de code pour
eat-click
:Vous pouvez maintenant ajouter le
eat-click
attribuer à un élément et il obtiendrapreventDefault()
'ed automatiquement.Avantages:
$event
objet dans votredo()
fonction.$event
objetError: $ is not defined
. Ce qui me manque?angular.element(element).bind('click', function(event){...});
. Il a travaillé. Ref: jQLite<button>
éléments d'effectuer l'envoi de fonction).Bien que Renaud a donné une excellente solution
Personnellement, je trouve que vous avez aussi besoin de $de l'événement.stopPropagation() dans certains cas d'éviter certains des effets secondaires
sera ma solution
La solution la plus simple que j'ai trouvé est celui-ci :
Donc, la lecture à travers ces réponses, @Chris a toujours le plus de "bonne" réponse, je suppose, mais il a un problème, il ne montre pas le "pointeur"....
Donc, ici, sont deux façons de résoudre ce problème sans avoir besoin d'ajouter un curseur:pointeur style:
Utilisation
javascript:void(0)
au lieu de#
:Utilisation
$event.preventDefault()
dans leng-click
directive (si vous n'avez pas indésirable de votre contrôleur avec DOM références liées):Personnellement, je préfère l'ancien sur le second.
javascript:void(0)
a d'autres avantages qui sont discuté ici. Il y est également question de la "JavaScript discret" dans ce lien qui est terriblement récente, et n'a pas forcément les appliquer directement à un angulaire de l'application.javascript:;
Vous pouvez le faire comme suit
1.Supprimer
href
de l'attribut de l'ancre(a
) tag2.Place le pointeur du curseur dans le css pour ng cliquez sur les éléments
HTML
ici un pur angularjs: à proximité de ng-cliquez sur la fonction, vous pouvez écrire preventDefault() de la fonction séparant par un point-virgule
JS
(ou)
vous pouvez procéder de cette façon, c'est déjà discuté de certains ici.
HTML
JS
Essayer cette option que je peux voir n'est pas encore listé ci-dessus :
Depuis que vous êtes à faire une application web pourquoi avez-vous besoin de liens?
Échanger vos ancres de boutons!
si elle est encore pertinente:
La façon la plus sûre d'éviter des événements d'une href serait de le définir comme
Je voudrais aller avec:
Tout cela empêche par défaut de la chose qui a été source de confusion pour moi, donc j'ai créé un JSFiddle
il montre quand et où Angulaire est la prévention par défaut.
Le JSFiddle est à l'aide Angulaire de la directive, de sorte qu'il doit être EXACTEMENT le même. Vous pouvez voir le code source ici: une balise de code source
J'espère que cela va aider à la clarification de certains.
J'aurais bien aimé le post de la doc pour ngHref mais je ne peux pas à cause de ma réputation.
C'est ce que je fais toujours. Fonctionne comme un charme!
Ou si vous avez besoin d'inline ensuite, vous pouvez faire ceci:
Beaucoup de réponses semblent être exagéré. POUR MOI , cela fonctionne
J'ai besoin d'une présence de l'attribut href de la valeur pour la dégradation (quand js est désactivé), donc je ne peux pas utiliser vide attribut href (""ou"#"), mais le code ci-dessus ne fonctionne pas pour moi, parce que j'ai besoin d'un événement (e) de la variable. J'ai créé mon propre directive:
En HTML:
Emprunt de tennisgent de réponse. J'aime le fait que vous n'avez pas à créer un personnalisé directive à ajouter sur tous les liens. Cependant, je ne pourrais pas obtenir de son pour travailler dans IE8. Voici ce qui a fonctionné pour moi (à l'aide angulaire 1.0.6).
Avis que 'bind' vous permet d'utiliser jqLite fournis par angulaire, donc pas besoin de les envelopper avec plein de jQuery. A également requis la stopPropogation méthode.
dropdown
, je veux la propagation, mais pas le comportement par défaut. Cet extrait est PAS recommandé.J'ai rencontré ce même problème lors de l'utilisation de points d'ancrage pour une angulaires bootstrap déroulant. La seule solution que j'ai trouvé qui a évité les effets secondaires indésirables (ie. la liste déroulante de ne pas fermer à cause de l'utilisation de preventDefault()) a été d'utiliser les éléments suivants:
si vous souhaitez ne jamais aller href... vous devriez changer votre balisage et d'utiliser un bouton pas une balise d'ancrage, car du point de vue sémantique, il n'est pas un point d'ancrage ou un lien. Inversement, si vous avez un bouton qui effectue certaines vérifications et redirige ensuite il devrait y avoir un lien /balise d'ancrage et pas un bouton... pour les fins de SEO comme des essais de puits [insérer le test de suite ici].
pour les liens que vous ne souhaitez rediriger de façon conditionnelle, comme invite à enregistrer les modifications, ou de reconnaître sale état... vous devez utiliser ng-click="someFunction($event)" et dans someFunction sur votre validationError preventDefault et ou stopPropagation.
aussi juste parce que vous pouvez ne signifie pas que vous devriez. javascript:void(0) a bien fonctionné retour dans la journée... mais à cause de l'infâme hackers/crackers navigateurs drapeau applications ou de sites que l'utilisation de javascript dans un href... voir aucune raison de ducktype ci-dessus..
c'est 2016 depuis 2010, ne devrait avoir aucune raison de n'importe où à utiliser des liens qui agissent comme des boutons... si vous avez encore de support d'IE8 et en dessous vous avez besoin de réévaluer votre lieu d'affaires.
Ce que vous devez faire, c'est omettre le
href
attribut entièrement.Si vous regardez la le code source pour la
a
élément de la directive (qui est une partie de l'écart Angulaire de base), il déclare à la ligne 29 - 31:Qui signifie Angulaire est déjà la résolution de la question des liens sans un href. Le seul problème que vous avez encore est le problème de css. Vous pouvez toujours appliquer le type de pointeur vers des ancres qui ont ng-clics, par exemple:
Donc, vous pouvez même faire votre site plus accessible par le marquage des liens réels avec une subtile, différents style puis les liens qui exécutent des fonctions.
Bon codage!
Vous pouvez désactiver la redirection d'url à l'intérieur de $emplacement du Html5Mode pour atteindre l'objectif. Vous pouvez le définir à l'intérieur du contrôleur spécifique utilisé pour la page.
Quelque chose comme ceci:
JS:
Une autre solution pourrait être:
span
pour cliquant fins. Il suffit d'aller pour @tennisgent de la réponse -- ancres sanshref
défini.