Événement d'accès pour appeler preventdefault depuis la fonction personnalisée provenant de l'attribut onclick de la balise

119

J'ai des liens comme celui-ci:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

Et je voudrais faire un preventDefault()dedans myfunc(), car un #sera ajouté dans la barre d'adresse en cliquant sur le lien (sans faire return false;ou href='javascript:void(0);')

Est-ce possible? Puis-je avoir l'événement à l'intérieurmyfunc()

Omu
la source
6
Quel est le problème avec return false?
Alex
5
il arrête aussi la propagation
Omu
4
return falsearrête uniquement la propagation dans jQuery.
cruzanmo

Réponses:

157

Je crois que vous pouvez passer eventdans la fonction en ligne qui sera l' eventobjet de l'événement déclenché dans les navigateurs compatibles W3C (c'est-à-dire que les anciennes versions d'IE nécessiteront toujours une détection à l'intérieur de votre fonction de gestionnaire d'événements window.event).

Un exemple rapide .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Exécutez-le tel quel et notez que le lien ne redirige pas vers Google après l'alerte.
  2. Ensuite, changez le eventpassé dans le onclickgestionnaire en quelque chose d'autre comme e, cliquez sur Exécuter, puis notez que la redirection a lieu après l'alerte (le volet de résultats devient blanc, démontrant une redirection).
Russ Cam
la source
5
ok, je vois que tout ce que j'avais à faire est de mettre mon paramètre en deuxièmemyfunc(event, {a:123, b:"asdas"})
Omu
1
@Omu L'argument passé, événement, peut être à n'importe quel endroit, il n'est pas nécessaire qu'il soit le premier, tant qu'il est au bon endroit de la liste de paramètres définie pour la fonction. Par exemple,, function myfunc(o, e) {...}alors il peut être appelé comme myfunc({a:1, b:'hi'}, event).
cateyes
2
Je pense que vous n'avez pas à transmettre et capturer explicitement l'objet événement. Vous pouvez simplement vous y référer dans la fonction. Quelqu'un peut-il confirmer s'il vous plaît? Je veux dire, ce code sans l'événement devrait également fonctionner:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij
111

La solution la plus simple est simplement:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

C'est en fait un bon moyen de contourner le cache pour les documents avec une solution de secours pour les navigateurs sans JS (pas de contournement de cache si pas de JS)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

Si JavaScript est activé, il ouvre le PDF avec une chaîne de requête de contournement du cache, sinon il ouvre simplement le PDF.

JuLo
la source
Pourrait simplement utiliser la technologie côté serveur pour réécrire ce lien si le contournement du cache est tout ce que vous recherchez.
mpen
Ce serait mieux, mais je n'ai pas accès au code côté serveur. Travailler avec ce que j'ai.
JuLo
11

Essaye ça:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>
Suave Nti
la source
cela nécessite une balise <script> pour chaque événement de clic rendant le code plus compliqué.
somid3
Cela nécessite également jQuery, qui, bien qu'il puisse être présent, ne devrait pas être une condition préalable.
Remise irrégulière du
Également en désaccord ici, une simple analyse d'une fonction en ligne est plus efficace et moins de code.
Shannon Hochkins
1
@ somid3, alors que jQuery n'est pas nécessaire , si vous êtes inquiet au sujet des performances, vous pouvez utiliser un seul gestionnaire d'événements de sorte que vous délégué êtes seulement fixer un seul écouteur pour tous les points d' ancrage sur la page comme ceci: $("body").on("click","a",function(e) { e.preventDefault() });. Dans les deux cas, aucune des deux solutions n'aura un impact significatif sur les performances.
KyleMit
7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>
Aram Mkrtchyan
la source
2
Cela s'applique à chaque ancre, et rompra tous les liens, nécessite également l'insertion de javascript sur la page ainsi que jQuery.
Shannon Hochkins
De plus, lors de l'utilisation de jQuery, il return falsen'est pas recommandé car cela empêchera également tous les autres gestionnaires d'événements de cet élément de s'exécuter et empêchera l'événement de remonter vers les éléments supérieurs.
Stijn de Witt
6

Ajoutez une classe unique aux liens et un javascript qui empêche la valeur par défaut sur les liens avec cette classe:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>
aaandre
la source
Approche intéressante pour une solution globale.
AFract le
5

Ne pouvez-vous pas simplement supprimer l'attribut href de la balise a?

Leigh Ciechanowski
la source
1
oui, c'est aussi une option, bien que par défaut le lien ne soit pas souligné, et si javascript est désactivé, il n'y aura pas href pour aller à
Omu
4

Je pense que lorsque nous utilisons onClick, nous voulons faire quelque chose de différent de celui par défaut. Donc, pour tous vos liens avec onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});
Ronan
la source
2

Facile!

onclick="blabla(); return false"
Jake
la source
2

Vous pouvez accéder à l'événement à partir d'un clic comme ceci:

<button onclick="yourFunc(event);">go</button>

et à votre fonction javascript, mon conseil est d'ajouter cette déclaration de première ligne comme:

function yourFunc(e) {
    e = e ? e : event;
}

puis utilisez partout e comme variable d'événement

gdarcan
la source
0

e.preventDefault (); depuis https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Ou faites renvoyer false de votre méthode.

rahul singh Chauhan
la source
1
En quoi votre réponse est-elle différente des réponses déjà fournies?
Dimitar Spasovski
On m'a donné une URL pour plus de clarté sur la question posée
rahul singh Chauhan
0

Sans aucune bibliothèque JS ou jQuery. Pour ouvrir une jolie fenêtre popup si possible. Échoue en toute sécurité à l'ouverture du lien normal.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

Et la fonction d'assistance:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Martin Večeřa
la source