Сделать целое div clickable при работе: активное правило css в IE10

Я создаю панель для просмотра html-приложения, содержащую несколько текстовых элементов и изображений.

Из того, что я понимаю, это обычно делается с помощью div. Что-то вроде этого:

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

С небольшим стилем и подключением события click это прекрасно работает, но у меня проблема с настройкой активного состояния:

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

В этом примере я пытаюсь сделать анимацию css (только IE), но это действительно может быть что угодно. Проблема в том, что активное состояние работает только тогда, когда я нажимаю на div, но не работает, когда я нажимаю на любой из дочерних элементов div.

Вот сценарий JS, чтобы показать сценарий:

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

ОБНОВЛЕНИЕ: Спасибо Дэвиду Томасу за то, что он указал на опечатку в коде и подтвердил, что это работает в Chrome.

К сожалению, в IE10 это работает только тогда, когда вы нажимаете на нижнюю часть div, вдали от текста.

Кто-нибудь знает, как правильно это сделать в IE10?

Ответ 1

В настоящее время невозможно (я думаю)

Из того, что я могу собрать, в настоящее время это невозможно, так как состояние :active дочернего элемента не распространяется до родительского div. Как Internet Explorer 10, так и Opera 11.64 не удалось распространить состояние :active до родителя при тестировании с помощью элементов div.

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

Обход

Единственное другое решение, которое приходит на ум, - использовать распространение событий в JavaScript. К счастью, события мультикана будут распространяться на DOM и на родителя div. В следующем примере используется jQuery:

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

Обратите внимание, что я модифицировал псевдокласс класса :active как фактический класс .active. Это было протестировано в IE10 и работает. Учитывая этот подход, он должен работать без каких-либо проблем практически в каждом крупном браузере.

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

Ответ 2

Почему бы вам не использовать элемент HTML <button>. Он создан для вашего дела. Div не фокусируется, а кнопка получает.

Ответ 3

Вы можете использовать CSS pointer-events: none; для дочернего элемента, который вы хотели бы игнорировать события мыши, и он будет соответствующим образом подорвать его родителя.

Ответ 4

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

Я буду честен, я понятия не имею, если вы можете использовать *: псевдоселектор в IE, но хром вы можете так сделать.

Ответ 5

Я накладываю элемент с помощью :after, чтобы дети не могли быть интерактивными.

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