web-dev-qa-db-de.com

Machen Sie eine ganze div klickbar mit der working: active CSS-Regel in IE10

Ich entwerfe ein anklickbares Panel für eine HTML-App, die mehrere Textelemente und Bilder enthält.

Nach meinem Verständnis wird dies im Allgemeinen mit einem div gemacht. Etwas wie das:

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

Mit etwas Styling und dem Anhängen des Klickereignisses funktioniert dies gut, aber ich habe Probleme mit dem Styling des aktiven Status:

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

In diesem Beispiel versuche ich, eine CSS-Animation zu erstellen (nur IE), dies könnte jedoch alles sein. Das Problem ist, dass der aktive Status nur funktioniert, wenn ich auf das div klicke, aber nicht funktioniert, wenn ich Klicken Sie auf eines der Kinder des Div.

Hier ist ein JS Fiddle, um das Szenario zu zeigen:

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

UPDATE: Vielen Dank an David Thomas, der auf einen Tippfehler im Code hingewiesen und bestätigt, dass dies in Chrome funktioniert.

Leider funktioniert das in IE10 nur, wenn Sie auf den unteren Teil des div außerhalb des Texts klicken.

Weiß jemand, wie man das richtig in IE10 zum Laufen bringt?

16
Patrick Klug

Derzeit nicht möglich (denke ich)

Soweit ich wissen kann, ist dies derzeit nicht möglich, da der :active-Zustand eines Kindes nicht bis zum übergeordneten div weitergegeben wird. Sowohl Internet Explorer 10 als auch Opera 11.64 konnten den :active-Status beim Testen mit div-Elementen nicht bis zum übergeordneten Element übertragen.

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

Workaround

Die einzige andere Lösung, die mir einfällt, wäre die Verwendung der Ereignisweitergabe in JavaScript. Glücklicherweise breiten sich die Ereignisse einer Mausedown auf dem DOM und auf der übergeordneten Variable div aus. Das folgende Beispiel verwendet jQuery:

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

Beachten Sie hier, dass ich die :active-Pseudoklasse geändert habe, um eine tatsächliche Klasse .active zu sein. Dies wurde in IE10 getestet und funktioniert. Bei diesem Ansatz sollte es in fast jedem größeren Browser problemlos funktionieren.

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

17
Sampson

Warum verwenden Sie nicht das HTML <button>-Element. Es ist für Ihren Fall erstellt. Div nimmt den Fokus nicht, während der Button kommt.

5
Saeed Neamati

Sie können CSS pointer-events: none; für ein untergeordnetes Element verwenden, für das Sie Mausereignisse ignorieren möchten, und es wird entsprechend zum übergeordneten Element angezeigt.

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

Ich werde ehrlich sein, ich habe keine Ahnung, ob Sie *: Pseudo-Selector in IE verwenden können, aber Chrom, Sie können, also ist es einen Versuch wert.

0
austinbv

Ich überlagere das Element mit :after, so dass Kinder nicht anklickbar sind. 

.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