web-dev-qa-db-fra.com

Rendre toute une division cliquable avec working: Active css rule dans IE10

Je conçois un panneau cliquable pour une application HTML contenant plusieurs éléments de texte et images.

D'après ce que je comprends, cela se fait généralement avec un div. Quelque chose comme ça:

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
    <img ...>
</div>

Avec un peu de style et de connexion à l'événement click, cela fonctionne bien, mais j'ai un problème avec le style de l'état actif:

.myButton {
    cursor:pointer;
}
    .myButton:active{
        -ms-transition-duration: 0.2s;
        -ms-transform: scale(0.95);
    }

Dans cet exemple, j'essaie de faire une animation css (IE uniquement) mais cela pourrait vraiment être n'importe quoi . Le problème est que l'état actif ne fonctionne que lorsque je clique sur la div, mais ne fonctionne pas lorsque je clique sur l'un des enfants de la div.

Voici un JS Fiddle pour montrer le scénario:

http://jsfiddle.net/S9JrH/13/

UPDATE: Merci à David Thomas pour avoir signalé une faute de frappe dans le code et avoir confirmé que cela fonctionnait sous Chrome.

Malheureusement, dans IE10, cela ne fonctionne que lorsque vous cliquez sur la partie inférieure de la div, loin du texte.

Est-ce que quelqu'un sait comment faire fonctionner cela correctement dans IE10?

htmlcssinternet-explorer-10
16
Patrick Klug

Actuellement pas possible (je pense)

D'après ce que je peux comprendre, ce n'est actuellement pas possible car l'état :active d'un enfant n'est pas propagé jusqu'au parent div. Internet Explorer 10 et Opera 11.64 n'ont pas tous deux réussi à propager l'état :active jusqu'au parent lors du test avec les éléments div.

Fiddle: http://jsfiddle.net/jonathansampson/UrN39/

Workaround

La seule autre solution qui me vienne à l’esprit serait d’utiliser la propagation d’événements en JavaScript. Heureusement, les événements d'un mousedown se propagent sur le DOM et sur le parent div. L'exemple suivant utilise jQuery:

$(".myButton").on("mousedown mouseup mouseleave", function(e){
    $(this).toggleClass( "active", e.type === "mousedown" );
});

Notez ici que j'ai modifié la pseudo-classe :active pour qu'elle soit une classe réelle .active. Cela a été testé dans IE10 et fonctionne. Compte tenu de cette approche, cela devrait fonctionner sans problème dans presque tous les principaux navigateurs.

Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/

17
Sampson

Pourquoi n'utilisez-vous pas l'élément HTML <button>? Il est créé pour votre cas. La div ne prend pas la concentration, alors que le bouton devient.

5
Saeed Neamati

Vous pouvez utiliser le CSS pointer-events: none; sur un élément enfant pour lequel vous ne souhaitez pas tenir compte des événements de souris. Il sera ensuite transmis à son parent.

1
Jay Neiman
.myButton:active, .myButton *:active{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.95);
}

Je serai honnête, je ne sais pas si vous pouvez utiliser *: pseudo-sélecteur dans IE mais vous pouvez le chromer pour que cela vaille la peine.

0
austinbv

Je superpose l'élément à l'aide de :after afin que les enfants ne puissent pas être cliqués. 

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}
0
Blake Plumb