jQuery: détection cmd+clic ou ctrl+clic
j'ai les options de mon application web dans des onglets.
<ul id="tabs">
<li><a href="a.php">aaa</a></li>
<li><a href="b.php">bbb</a></li>
<li><a href="c.php">ccc</a></li>
<li><a href="d.php">ddd</a></li>
<li><a href="e.php">eee</a></li>
</ul>
quand l'utilisateur clique sur n'importe quel onglet (dans la même fenêtre) il y a un effet fadeout que j'obtiens avec ce code, et ensuite une redirection automatique:
$('ul#tabs li a').click(function(e){
if(e.which == 1) {
var link = $(this).attr('href');
$('#content').fadeOut('fast',function(){
window.location = link;
});
}
});
cela fonctionne très bien, car il ignore le clic du milieu de la souris (lors de l'ouverture de l'option dans un nouvel onglet, l'effet ne doit pas être déclenché). Le problème est que, si j'ouvre l'onglet avec un clavier+souris combinaison, au lieu d'ouvrir un nouveau tab, il déclenche l'ensemble du code effet / redirection.
alors, comment puis-je détecter cela avec jQuery:
- cmd + clic gauche de la souris (mac)
- ctrl + clic gauche de la souris (windows/linux)
5 réponses
dans votre fonction click, does E. metaKey évalue à vrai? Si oui, vous y êtes.
Malheureusement, event.metaKey n'évalue pas à true sur Windows lorsque la touche ctrl est maintenue sur click.
Heureusement, event.ctrlKey est évalué à vrai dans ces situations. Aussi, vous pouvez envisager maj + clique dans votre gestionnaire d'événements.
ainsi, votre code javascript parfumé jQuery de plateforme croisée ressemblerait à quelque chose comme:
$('ul#tabs li a').on('click', function(e) {
var link = $(this).attr('href');
// Check "open in new window/tab" key modifiers
if (e.shiftKey || e.ctrlKey || e.metaKey) {
window.open(link, '_blank');
} else {
$('#content').fadeOut('fast',function(){
window.location = link;
});
}
}
});
en utilisant E. metaKey ne fonctionne pas de la même façon sur windows, donc pour détecter Windows, vous pouvez utiliser l'objet navigator et voir si l'utilisateur clique sur la touche ctrl (la façon par défaut d'ouvrir un nouvel onglet).
$('ul#tabs li a').click(function(a){
var href = $(this).attr('href');
// check if user clicked with command key (for mac) or ctrl key (for windows)
if(a.metaKey || (navigator.platform.toUpperCase().indexOf('WIN')!==-1 && a.ctrlKey)) {
window.open(href,'_blank');
} else {
$('#content').fadeOut('fast', function(){
window.location = href;
});
}
});
je sais que vous voulez utiliser jQuery, mais je donnerais Keymaster d'essayer:
https://github.com/madrobby/keymaster
c'est vraiment génial, je l'utilise pour un projet sur lequel je travaille et c'est génial.
selon MDN, l'événement.metaKey returns true pour les touche de commande sur Mac claviers et retourne true touches windows sur les claviers Windows.
donc, vous devriez aussi vérifier le ctrlKey propriété pour détecter la clé de contrôle.
if (event.ctrlKey || event.metaKey) {
//ctrlKey to detect ctrl + click
//metaKey to detect command + click on MacOS
yourCommandKeyFunction();
} else {
yourNormalFunction();
}