Comme j'essaye d'empêcher un événement ctr + clic dans toutes les balises d'ancrage de l'application html. Alors peut me suggérer comment faire un moyen efficace de faire dans tous les navigateurs en utilisant javascript ou Jquery. Merci d'avance
<a href="myapplication1.html" >myapplication1.html</a> <a href="myapplication2.html" >myapplication2.html</a> <a href="myapplication3.html" >myapplication3.html</a>
3 Réponses :
Ajouter un écouteur d'action sur tous les achors détectant la touche Ctrl.
Sur votre modèle
function blockCtrl(e){
if (window.event.ctrlKey) {
//ctrl was held down during the click
return false;
}
return true;
}
JS pour détecter la touche Ctrl et empêcher l'action de se produire.
<a onclick="blockCtrl()">Click Me</a>
Je ne pense pas que ce soit une chose compliquée à résoudre. Une petite recherche vous amènera à répondre à cette question. Cependant, vous pouvez empêcher toute action utilisateur sur votre page en utilisant javascript. Il vous suffit d'accéder à l'objet événement. Faites comme indiqué ci-dessous,
function blockClick(e){
if(e.ctrlKey && e.type == "click")
{
console.log("ctrl + mouse clicked !")
e.preventDefault();
}
}
<a href="myapplication1.html" onclick="blockClick(event)" >myapplication1.html</a>
<a href="myapplication2.html" onclick="blockClick(event)">myapplication2.html</a>
<a href="myapplication3.html" onclick="blockClick(event)">myapplication3.html</a>
Cela devrait fonctionner. Bon codage.
Eh bien, c'est intéressant. Cela ne fonctionne pas dans ie ou edge mais dans d'autres navigateurs, cela fonctionne. Laissez-moi vérifier et vous recontacter.
Je doute de la sagesse de faire cela et certains des commentaires ci-dessous le soutiennent. FireFox est très protecteur lorsqu'il s'agit d'ouvrir un nouvel onglet, et à mon avis à juste titre. Vous avez besoin d'une TRÈS bonne excuse pour briser le comportement attendu du navigateur.
Cela étant dit, voici une approche jQuery, qui fonctionne actuellement avec IE, Edge et Chrome, mais pas Firefox.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://www.google.com" >Google</a> <a href="https://www.bing.com" >Bing</a> <a href="https://stackoverflow.com" >Stack Overflow</a>
//Apply to all a tags
$("a").on("mousedown", function(event){
//If middle mouse buton or normal click with ctrl
if(event.which == 2 || (event.which == 1 && event.ctrlKey)) {
console.log("Block");
//Stop default behavior
event.preventDefault();
//Let the user know what is happening and give them options
if(confirm("Please don't open links in new tabs. Click 'OK' to open the link in this window")){
//change location of current tab
window.location.href = $(this).attr("href");
}
return false;
}
})
@Teemu il ne devrait pas event.which == 2 gérer cela. Les tests dans le chrome et le bord semblent fonctionner. Quel navigateur s'il vous plaît?
FireFox 69, également CTRL + clic sur un lien ouvre un nouvel onglet.
@Teemu, merci, je ne peux pas tester Firefox dans mon environnement actuel .... quelques règles informatiques étranges!
@Teemu, faveur rapide, j'ai mis à jour le code pour lancer une boîte de dialogue de confirmation. Est-ce que cela apparaît au moins dans FF69?
Oui, le pop-up apparaît, mais l'action par défaut n'est pas empêchée, c'est-à-dire que les nouveaux onglets sont toujours ouverts, CTRL + clic et le bouton du milieu ouvrent un nouvel onglet.
@Teemu thx, donc la capture d'événements fonctionne, mais preventDefault et return false ne fonctionnent plus comme les navigateurs précédents / autres
FireFox a déjà contourné certains événements clés, par exemple. certaines combinaisons de touches de raccourci ne peuvent pas être personnalisées avec JS. Ignorer la prévention des onglets correspond bien à leur politique UX.
@Teemu, yup, et cela montre simplement pourquoi ce que l'OP veut faire est de la folie. Cela brise l'UX accepté et les fournisseurs de navigateurs commencent à être assez pointilleux à ce sujet.
La question est pourquoi voulez-vous faire cela? Pourquoi voulez-vous interrompre le comportement attendu du navigateur? Qu'en est-il du clic de la molette de la souris qui fait la même chose? Menu contextuel du clic droit? Qu'en est-il lorsque l'utilisateur désactive javascript ou modifie la page via les outils de développement pour restaurer le comportement que vous avez supprimé?
Au fur et à mesure que mon application charge la page dans l'iframe. Ainsi, lorsque l'utilisateur essaie de cliquer sur la touche + ctr, la page s'ouvre dans un nouvel onglet, je veux donc empêcher cet événement. Mais car j'ai besoin de désactiver cet événement.
Une réponse courte est: vous ne pouvez pas. Il y a tellement de façons d'ouvrir un lien dans un nouvel onglet, et certaines d'entre elles ne peuvent être contournées. En dernier recours, l'utilisateur peut ouvrir un nouvel onglet vide et écrire l'adresse dans la barre d'adresse. Vous pouvez utiliser un "top-buster", qui ouvre toujours vos pages avec la page principale. Mais cela doit aussi être écrit en JS, votre serveur ne sait pas où il envoie la page. Ou créez un système de liens, où les liens ne sont pas des liens réels, mais en cliquant dessus, un script affiche une nouvelle page dans l'iframe.
@fekkyDev Si vous êtes intéressé par un simple top-buster, je pourrais publier une approche comme réponse. Ce top-buster utilise une chaîne de requête dans l'URL pour rediriger l'iframe et inclut également du code côté serveur. Il est simple à intégrer à une page principale existante et ne modifie pas les liens existants sur la page principale ou les sous-pages. Cela fonctionne bien dans tous les navigateurs modernes et IE10 et 11.