JavaScript implémente l'appui sur la touche Ctrl pour ouvrir une nouvelle page_javascript skills

(Note du traducteur : cet article résout le problème de l'utilisation de JS pour ouvrir une nouvelle page en appuyant sur la touche Ctrl)

Dans la spécification HTML5 simplifiée, plusieurs DIV et/ou autres éléments de niveau bloc peuvent être inclus dans la balise A. Désormais, tant que l'élément de bloc est enveloppé avec la balise <a> problème de l'utilisation de JavaScript pour écouter et appeler window.location pour implémenter la fonction de saut de page (redirection).

Mais il y a des situations où cette forme d'emballage utilisant des balises <a> ne fonctionne pas bien - par exemple, il y a des balises <a> dans un certain élément de bloc (bloc), dans ce cas, nous voulons simplement Accédez à une adresse donnée uniquement en cliquant sur d'autres parties du parent, à l'exception de <a>.

Bien sûr, nos besoins peuvent également être satisfaits à l'aide d'un simple auditeur comme le suivant :

Copier le code Le code est le suivant :

someElement.addEventListener('clic', function(e) {
// L'adresse URL peut être n'importe quoi, ou vous pouvez également utiliser d'autres codes pour spécifier.
// L'attribut DOM `data-src` de l'élément est utilisé ici (attribut)
​ window.location = someElement.get('data-url');
});

…Mais cela a parfois une mauvaise expérience utilisateur. Lorsque vous maintenez la touche CTRL (touche COMMANDE sur Mac) enfoncée et cliquez avec la souris, le lien s'ouvre dans la même fenêtre (onglet). Sachant qu'il existe ce problème, vous devez avoir réfléchi à la manière de le résoudre. Nous pouvons atteindre cet objectif en modifiant une petite quantité de code. Dépêchez-vous et prenez le temps de réparer votre écouteur :
.

Copier le code Le code est le suivant :

someElement.addEventListener('clic', function(e) {
//Obtenir l'URL
var url = someElement.get('data-url');
// Détermine si la touche CTRL est enfoncée
If(e.metaKey || e.ctrlKey || e.button === 1) {
          window.open(url);
} autre {
          window.location = url;
>
});

L'auteur original a implémenté cette fonction sur le site Web http://davidwalsh.name/. Vous devez également vous en souvenir lorsque vous utilisez window.location pour la redirection de page. Il s'agit d'une petite amélioration du code, mais d'une amélioration très importante de la convivialité !