Направете цял div да може да се кликва с работещо :active css правило в IE10

Проектирам панел с възможност за кликване за 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.

За съжаление в 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 елементи.

Fiddle: 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 и работи. Предвид подхода, той трябва да работи без проблем в почти всеки основен браузър.

Fiddle: 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