Сделайте весь div кликабельным с рабочим правилом :active 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 Fiddle, чтобы показать сценарий:

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

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

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

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


html css internet-explorer-10
person Patrick Klug    schedule 31.05.2012    source источник
comment
Просто примечание: boborder-width: 1px; должно быть border-width: 1px;.   -  person uınbɐɥs    schedule 04.06.2012
comment
@ShaquinTrifonoff: спасибо, исправлено.   -  person Patrick Klug    schedule 20.06.2012

Ответы (5)


arrow_upward
19
arrow_downward

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

Насколько я могу судить, в настоящее время это невозможно, так как состояние :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/

person Sampson    schedule 04.06.2012
comment
Я бы предложил также добавить 'mouseleave' в список событий, которые мы слушаем, в противном случае активное состояние остается, если вы перемещаете мышь из элемента, удерживая кнопку мыши нажатой. - person Patrick Klug; 20.06.2012
comment
Команда разработчиков IE классифицировала эту проблему как не исправимую. connect.microsoft.com/IE/feedback/details/757765/ - person JamesBarnett; 14.12.2013

arrow_upward
7
arrow_downward

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

person Saeed Neamati    schedule 31.05.2012
comment
Вы можете вложить другой контент в кнопку? - person Patrick Klug; 31.05.2012
comment
Да, конечно. <button> похож на <input type='submit' /> и автоматически отправляет форму по клику, но также позволяет встраивать в нее другую HTML-разметку. Однако, хотя вы можете встраивать <div> и <p> и такие элементы, как (элементы блочного уровня) в <button>, вы не должны этого делать. Используйте только элементы встроенного уровня, такие как <a> и <span>. - person Saeed Neamati; 31.05.2012
comment
Я действительно хочу использовать более сложные элементы в этой конкретной «кнопке». - person Patrick Klug; 01.06.2012
comment
См. элементы заголовков и Категории контента. Похоже, внутри <button> может поместиться почти что угодно... - person uınbɐɥs; 04.06.2012
comment
Я могу подтвердить, что ‹button› работает в IE 10. Это очень хорошее решение, спасибо. - person wukong; 10.01.2014

arrow_upward
1
arrow_downward

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

person Jay Neiman    schedule 06.10.2014

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward 

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

Честно говоря, я понятия не имею, можете ли вы использовать *:pseudo-selector в IE, но вы можете использовать Chrome, так что попробовать стоит.

person austinbv    schedule 31.05.2012
comment
да, вы можете использовать *: но тогда, конечно, активная анимация будет применяться только к элементу, по которому щелкнули, а не ко всему контейнеру div - person Patrick Klug; 31.05.2012
comment
.myButton *:active идентичен .myButton :active. - person BoltClock; 02.06.2012