web-dev-qa-db-ja.com

IE10でdiv全体を作業可能な：active cssルールでクリック可能にする

複数のテキスト要素と画像を含む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/

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

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

誰かがこれをIE10で正しく機能させる方法を知っていますか？

htmlcssinternet-explorer-10
17
Patrick Klug

現在不可能（私は思う）

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

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

Workaround

頭に浮かぶ唯一の他の解決策は、JavaScriptでイベント伝播を使用することです。幸いなことに、マウスダウンのイベントは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/

19
Sampson

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

6
Saeed Neamati

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

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

CSS pointer-events: none;マウスイベントを無視する子要素上で、その親に適切にバブルアップします。

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

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

0
austinbv