(Note du traducteur: Cet article résout le problème de l'utilisation de JS pour ouvrir une nouvelle page lors de l'appui de la touche CTRL)
Dans la spécification HTML5 simplifiée, plusieurs DIV et / ou d'autres éléments au niveau des blocs peuvent être inclus dans la balise A. Maintenant, il suffit d'envelopper les éléments de bloc avec la balise <a>, vous pouvez résoudre le problème dont vous aviez à l'origine besoin pour écouter avec JavaScript et appeler Window.Location pour atteindre la fonction de redirection de la page.
Cependant, ce formulaire d'emballage utilisant la balise <a> ne fonctionne pas non plus bien - par exemple, il existe des balises <a> dans un élément de bloc. Dans ce cas, nous ne voulons passer à une adresse donnée que lorsque vous cliquez sur d'autres parties autres que <a> dans le parent.
Bien sûr, l'utilisation d'un auditeur simple comme ce qui suit peut également répondre à nos besoins:
La copie de code est la suivante:
someelement.addeventListener ('click', fonction (e) {
// Toute adresse d'URL est OK, ou vous pouvez utiliser un autre code pour le spécifier.
// Voici l'attribut `` Data-Src` DOM de cet élément (attribut)
window.location = someElement.get ('data-url');
});
... mais cela a parfois une mauvaise expérience utilisateur. Lorsque vous maintenez la touche Ctrl (Mac est la touche de commande) et cliquez avec la souris, il ouvrira le lien dans la même fenêtre (onglet). Sachant qu'il y a ce problème, vous devez avoir pensé à la façon de le résoudre. Nous pouvons y parvenir en modifiant un petit code. Prenez le temps de réparer votre auditeur:
La copie de code est la suivante:
someelement.addeventListener ('click', fonction (e) {
// Obtenez URL
var url = someelement.get ('data-url');
// déterminer si la touche Ctrl a été enfoncée
if (e.Metakey || e.ctrlkey || e.button === 1) {
window.open (URL);
} autre {
Window.Location = URL;
}
});
L'auteur d'origine a implémenté cette fonction sur le site Web http://davidwalsh.name/, et vous devez vous en souvenir lorsque vous utilisez Window.Location pour la redirection de page. Il s'agit d'une petite amélioration du code, mais il est très important d'améliorer la convivialité!