Je veux un bouton "Appuyez sur" lorsque vous avez cliqué sur. Cependant, la méthode que j'ai tentée a un effet indésirable - certains clics dans certains endroits sur le bouton ne sont pas enregistrés.
Cette question n'est pas sur JavaScript. Strong> J'ai lié à un jsfiddle ci-dessous , qui utilise un auditeur d'événement JavaScript Cliquez sur CLIQUE, mais cela ne doit mieux décrire le problème. Le problème réel que je suis confronté n'est rien à donner avec les auditeurs d'événements - le lien hypertexte lui-même ne fonctionne pas lorsque vous cliquez sur divers endroits (le navigateur ne gêne pas la page liée, et même si le CSS CSS J'utilise: p> : actif code> > La classe fonctionne bien, le navigateur se comporte comme s'il n'y avait même pas de clic). P>
Le bouton gras, dépressionnable que j'essaie de styles. P>
BlockQuote> <div id="linkContainer">
<a class="fatButton" href="#">Click me</a>
</div>
5 Réponses :
C'est parce que vous déplacez le bouton avec le sélecteur actif. Le haut de l'élément change de 8px et cela se produit avant que l'événement de clic est enregistré avec JavaScript. Ainsi, lorsque vous cliquez dans les 8 pixels TOP 8, le clic ne vous enregistrera pas.
Vous pouvez obtenir le même effet en modifiant également la valeur supérieure de remplissage dans: actif. P>
a.fatButton:active {
top:8px;
padding-top:16px;
box-shadow: none;
}
Votre violon effectue exactement alors que le mien a fait - ajouter du rembourrage ne change rien.
De plus, ce n'est pas seulement le haut du bouton qui ne répond pas - regarde la vidéo YouTube, il ne s'inscrit pas clique sur environ 1/3 et 2/3 de la hauteur du bouton.
Je pense que nous pouvons utiliser "Mousedown" au lieu de "cliquer", peut résoudre ce problème
Fiddle mis à jour: http://jsfiddle.net/d3y9x/8/
+1 Pour répondre littéralement sur la question, mais je ne peux pas l'accepter comme répondant à mon problème réel. J'ai fait une édition à ma question originale: tandis que Mousedown est une solution de contournement lorsqu'il s'agit d'événements JavaScript, mon problème réel est que le lien lui-même ne fonctionne pas comme un hyperlien - le JavaScript dans le violon était juste ajouté comme un moyen plus facile de décrire le problème.
La raison est que le : actif pseudo-classe est utilisé pour appliquer CSS aux éléments lorsqu'il est en cours de clic sur. Donc, cela arrive avant que cliquez sur les déclencheurs de l'événement. Lorsque vous déplacez la position du bouton 8PX vers le bas, le bouton n'est plus là et il a été déplacé vers 8px vers le bas afin que l'événement du clic ne déclenche pas et que le lien ne déclenche pas. travail.
solution:
Je pense que vous devez concevoir une image d'arrière-plan avec une ombre et une autre sans ombre et basculer l'image d'arrière-plan de votre bouton lors de sa clic.
Il semble que la position de position Supprimer la position: Relative, il fonctionnera Nouveau code ...
a.fatButton {
display: inline-block;
margin: 8px;
padding: 16px;
background: #faa;
border-radius: 16px;
box-shadow: 0 8px 0 0 #f88;
text-decoration: none;
color: #000;
}
a.fatButton:active {
top: 8px;
box-shadow: none;
}
<div id="linkContainer">
<a class="fatButton" href="#">Click me</a>
</div>
Cela ne fonctionne pas correctement. Lorsque vous supprimez la propriété POSITION , le bouton ne s'allume pas lors de sa cliquette. Par défaut, la position est statique . Afin d'appliquer la position de la propriété supérieure doit être relatif
Si vous déplacez un élément comme celui-ci (dans votre cas, avec des valeurs supérieures ou de rembourrage), l'événement "MOUSEDOWN" reste, mais vous modifiez la zone dans laquelle appuyez sur la touche "CLIQUE" Evénement DOM.
Peut-être que cela aiderait:
Est-il acceptable d'utiliser l'événement MouseDown à la place? J'ai trouvé que pour travailler violon: jsfiddle.net/d3y9x/6
@cjross Le JavaScript dans le jsfiddle n'a été ajouté que pour montrer le problème - en fait, le problème que j'ai est que le lien ne suive pas réellement à la page hyperliétée lorsqu'il est cliqué sur (Ignorer JavaScript complètement). J'ai ajouté l'écouteur de l'événement de clic juste pour qu'il était plus évident de ce qui se passait ici.
Pourriez-vous mettre à jour votre question avec le HTML pertinent?