Подтвердить что ты не робот

"pointer-events: none" не работает в IE9 и IE10

Свойство CSS - pointer-events: none; отлично работает в Firefox, но это не в Internet Explorer 9-10.

Есть ли способ добиться такого же поведения этого свойства в IE? Любые идеи?

4b9b3361

Ответ 1

В документах MDN:

Предупреждение. Использование указателей-событий в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью спецификации CSS-интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4.

Подробнее здесь, в основном pointer-events на не-SVG (Масштабируемая векторная графика) является нестандартным.
Если вы проверите таблицу поддержки браузера на связанной странице (примерно на две трети вниз), вы заметите, что поддержка IE на non-svg - это ziltsh, jack squat, naut,... не поддерживается, то есть.

После некоторого копания я столкнулся с этой статьей, которая позволяет вам имитировать поведение посредством использования слоев, и, спасибо этот пост, я нашел этот JS-bin Это может помочь...

Однако в IE (и Opera, и AFAIK всех браузерах) вы можете просто принудительно ввести тип элемента в элемент:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

Результат должен быть очень похож на результат pointer-events: none;

Update:

Если вы хотите предотвратить события кликов в IE, которые, как указано в шасси, запрещены в других браузерах, просто добавьте прослушиватель событий, который делегирует событие click.
В настоящий момент я предполагаю, что вы нацеливаете все элементы a:

var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

Это должно предотвратить все события щелчка на элементах привязки.

Ответ 2

От взгляда на API-интерфейсы я не думаю, что Rich Point Harris Points.js, а не Hands.js, обеспечивают поддержку указателей-событий: none.

Таким образом, я только что реализовал крошечную script до polyfill эту функцию:

Ответ 3

Для crappy IE10 существует другое решение, например:

/* must be over the element that have the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* must have a color on ie10, if not :after does not exist... */
    opacity: 0;
}