web-dev-qa-db-fra.com

Le bouton ne fonctionne pas sur les appareils mobiles mais sur l'amorçage du PC

J'ai créé un bouton d'amorçage qui contient un lien. Qui ressemble à ceci:

enter image description here

Quand vous survolez dessus: 

enter image description here

C'est le code à l'intérieur du bouton:

 <div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>

Le bouton de déconnexion:

<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>

Ce bouton fonctionne bien sur le navigateur du PC (IE, SAFARI, FireFox, Chrome, Opera) (me conduit à la page d’administration, mais ne fonctionne pas sur les appareils mobiles. 

J'ai fait la même chose pour le bouton de déconnexion, et cela fonctionne bien sur les PC et les appareils mobiles. Je suis maintenant perplexe.

javascriptjqueryhtmlcsstwitter-bootstrap-3
6
kya

Le problème peut être que vous utilisez l'événement onClick qui ne sera pas enregistré sur un appareil mobile (car vous ne cliquez pas, vous tapez).

Cette réponse explique comment utiliser l'événement "touchstart" qui fonctionnera sur un mobile.

https://stackoverflow.com/a/22015946/2619909

9
Git Paul

Je sais que cela pourrait être une réponse étrange. Mais dans certains cas, les clickevents mobiles ne fonctionnent que si vous mettez le style: cursor: pointeur; à votre bouton.

Les clickEvents mobiles sont gérés de manière très différente, le premier "clic" ou "tap" peut être interprété comme un HOVER au lieu du clic recherché.

Essayez donc de définir le style CSS du bouton sur: cursor: pointeur;

3
noa-dev

malheureusement, ni la définition de cursor:pointer; ni l'ajout d'un écouteur d'événement touchstart 

$(document).ready(function() {
  $('#button_id').on('click touchstart', function() {
    window.location.href = "/url";
  });
});

comme @ noa-dev et @GitPauls ont suggéré que cela a fonctionné pour moi. pour référence, j'ai testé sur mon phone7 (iOS 11.4 et Safari)

solution de travail: J'ai défini le z-index du bouton sur un grand nombre positif et le bouton fonctionne maintenant.

#button_id{
  z-index: 99;
}

_ {solution trouvée grâce à Daniel Acree} _ https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone . Je ne sais pas si cela se généralise à tous les iphone/appareils mobiles.

0
JSMorgan