Comment empêcher une balise de sauter en javascript

Dans le développement Web, la balise a est une balise très courante. Elle est utilisée pour définir un lien. Lorsque l'utilisateur clique sur le lien, le navigateur accède à l'adresse spécifiée par le lien. Mais dans certains cas, nous n'avons pas besoin de passer à une nouvelle page. Par exemple, dans une application monopage, nous souhaitons simplement mettre à jour le contenu de la page via JavaScript. À l'heure actuelle, nous pouvons utiliser certains attributs de la balise a pour empêcher son comportement par défaut et implémenter des opérations personnalisées.

1. Empêcher la balise a de sauter

Dans la balise a, vous pouvez utiliser l'expression void(0) de JavaScript comme valeur de l'attribut href pour empêcher le comportement par défaut de la balise a. Par exemple :

<a href="javascript:void(0)">点击这里</a>

Lorsque l'utilisateur clique sur ce lien, le navigateur ne sautera pas. Cependant, il convient de noter que même si cette méthode peut empêcher le comportement par défaut, elle n'empêchera pas la transmission des événements, c'est-à-dire qu'après avoir cliqué sur ce lien, l'événement de clic sera toujours transmis à l'élément parent. pour empêcher la transmission de l'événement, vous devez ajouter du code event.stopPropagation() à la fonction de gestionnaire d'événements, par exemple :

<div id="parent">
  <a href="javascript:void(0)" onClick="event.stopPropagation()">点击这里</a>
</div>

Lorsque l'utilisateur clique sur ce lien, non seulement le saut ne se produira pas, mais l'événement se produira ne soit pas transmis à l'élément parent.

2. Personnaliser les événements de clic

Dans la balise a, en plus d'utiliser void(0) pour empêcher le comportement par défaut, vous pouvez également utiliser du code JavaScript pour personnaliser l'événement de clic. Par exemple :

<a href="#" onClick="alert(&#39;这是一个自定义点击事件&#39;)">点击这里</a>

La valeur de l'attribut href ici est '#' Lorsque l'utilisateur clique sur ce lien, bien qu'il saute en haut de la page actuelle (car '#' représente un point d'ancrage dans la page), c'est dû. au traitement de l'événement onClick L'instruction d'alerte dans la fonction affichera une boîte de dialogue pour indiquer à l'utilisateur qu'il s'agit d'un événement de clic personnalisé.

L'avantage de cette méthode est que vous pouvez utiliser du code JavaScript dans l'événement click sans bloquer la livraison de l'événement ni empêcher le comportement par défaut, car cette méthode exécutera d'abord la fonction de traitement d'événement, puis exécutera le comportement par défaut. Mais l’inconvénient est que si vous devez définir plusieurs événements de clic personnalisés, le code deviendra volumineux. Et cette méthode ne peut pas empêcher le déclenchement de plusieurs événements de clic.

3. Utilisez des écouteurs d'événements

Afin de résoudre les problèmes ci-dessus, vous pouvez utiliser la méthode addEventListener() de l'écouteur d'événements JavaScript pour lier des événements personnalisés à la balise a. Par exemple :

<a href="#" id="myLink">点击这里</a>

document.querySelector('#myLink').addEventListener('click', function() {
  alert('这是一个自定义点击事件');
});

Cette méthode peut découpler les événements personnalisés de la balise a tout en empêchant le comportement par défaut et la transmission des événements. Et cette méthode peut également résoudre le problème des déclencheurs d'événements de clics multiples, car chaque clic n'exécutera qu'une seule fois un événement personnalisé. De plus, les écouteurs d'événements peuvent également être utilisés pour transmettre des paramètres pour des événements personnalisés afin d'obtenir des opérations plus flexibles.

4. Résumé

Dans le développement Web, la balise a est une balise très courante, mais dans certains cas, nous n'avons pas besoin de son comportement par défaut, ou nous souhaitons ajouter plus de code JavaScript à l'événement click. À l'heure actuelle, nous pouvons utiliser certains attributs de la balise a et du code JavaScript pour définir nos propres opérations. Cependant, il convient de noter que ces méthodes doivent considérer comment empêcher le comportement par défaut et la transmission d'événements, et comment résoudre le problème du déclenchement d'événements de clics multiples. Lorsque vous utilisez les méthodes ci-dessus, vous devez choisir la méthode qui vous convient le mieux en fonction de la situation réelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!