19

複数のテキスト要素と画像を含む html アプリのクリック可能なパネルを設計しています。

私が理解していることから、これは一般的にdivで行われます。このようなもの：

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

少しスタイリングしてクリックイベントを接続すると、これは正常に機能しますが、アクティブ状態のスタイリングに問題があります。

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

この例では、CSS アニメーション (IE のみ) を実行しようとしていますが、これは実際には何でもかまいません。問題は、div をクリックしたときにのみアクティブ状態が機能し、div の子をクリックしても機能しないことです。

シナリオを示す JS Fiddle を次に示します。

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

更新:コードのタイプミスを指摘し、これが Chrome で機能することを確認してくれた David Thomas に感謝します。

残念ながら、IE10 では、テキストから離れた div の下部をクリックした場合にのみ機能します。

IE10でこれを正しく機能させる方法を知っている人はいますか?

4

5 に答える 5

19

現時点では不可能です（と思います）

:active私が収集できることから、子の状態が親まで伝播されないため、これは現在不可能divです。Internet Explorer 10 と Opera 11.64 の両方で、要素:activeをテストしたときに状態を親に伝達できませんでした。div

フィドル: http://jsfiddle.net/jonathansampson/UrN39/

回避策

他に考えられる唯一の解決策は、JavaScript でイベント伝搬を使用することです。幸いなことに、mousedown のイベントは DOM と親に伝播しますdiv。次の例では、jQuery を使用しています。

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

ここで、:active疑似クラスを実際のクラスに変更したことに注意してください.active。これは IE10 でテストされ、動作します。このアプローチを考えると、ほぼすべての主要なブラウザーで問題なく動作するはずです。

フィドル: http://jsfiddle.net/jonathansampson/S9JrH/8/

于 2012-06-04T17:24:02.860 に答える
7

<button>HTML要素を使ってみませんか。それはあなたのケースのために作成されました。ボタンが取得されている間、Divはフォーカスを取りません。

于 2012-05-31T05:26:25.560 に答える
1

:after子がクリックできないように、要素を使用してオーバーレイします。

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}
于 2015-05-08T21:03:58.887 に答える
0 
.myButton:active, .myButton *:active{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.95);
}

正直なところ、IE で *:pseudo-selector を使用できるかどうかはわかりませんが、chrome を使用できるので、試してみる価値があります。

于 2012-05-31T05:20:00.833 に答える