CSS' pointer-events ' альтернатива свойств для IE

вот еще одно решение, которое очень легко реализовать с помощью 5 строк кода:

1. захват события "mousedown" для верхнего элемента (элемент, который вы хотите отключить события указателя).
2. в "mousedown" скрыть верхний элемент.
использовать.elementFromPoint()' для получения базового элемента.
3. отобразить верхний элемент.
4. выполнить желаемое событие для базового элемент.

пример:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

существует обходной путь для IE-используйте встроенный SVG и установите указатель-события= " нет " в SVG. См. мой ответ в Как заставить Internet Explorer эмулировать события указателя: нет?

стоит отметить, что специально для IE, disabled=disabled работает для якорных тегов:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE рассматривает это как disabled элемент и не срабатывает событие click. Однако,disabled не является допустимым атрибутом в теге якоря. Следовательно, это не будет работать в других браузерах. Для них pointer-events:none требуется в стилизации.

обновление 1: поэтому добавление следующего правила кажется мне кросс-браузерным решением

обновление 2: Для дальнейшей совместимости, потому что IE не будет формировать стили для якорных тегов с disabled='disabled', так они еще будут посмотреть активный. Таким образом, a:hover{} правило и стиль-хорошая идея:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

работа с Chrome, IE11 и IE8.
Конечно, выше CSS предполагает, что якорные теги отображаются с disabled="disabled"

вот небольшой скрипт, реализующий эту функцию (вдохновленный Ши Фредерик статья в блоге что Кайл упоминает):

• Указатель Событий Polyfill.

накройте оскорбительные элементы невидимым блоком, используя псевдо-элемент::before или :after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

таким образом, вы нажимаете земли на родительский элемент. Не хорошо, если родитель кликабелен, но работает хорошо в противном случае.

Я потратил почти два дня на поиск решения этой проблемы, и я нашел это, наконец.

Это использует javascript и jquery.

(GitHub) pointer_events_polyfill

Это может использовать плагин javascript для загрузки / копирования. Просто скопировать/скачать коды с этого сайта и сохраните его как pointer_events_polyfill.js. Включить javascript для вашего сайта.

<script src="JS/pointer_events_polyfill.js></script>

добавьте этот сценарий jquery в свой сайт

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

и не забудьте включить плагин jquery.

это работает! Я могу щелкнуть элементы под прозрачным элементом. Я использую IE 10. Я надеюсь, что это также может работать в IE 9 и ниже.

EDIT: использование этого решения не работает при щелчке текстовых полей под прозрачным элементом. Чтобы решить эту проблему, я использую фокус, когда пользователь нажимает на текстовый.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Это позволяет ввести текст в текстовое поле.

Я нашел другое решение для решения этой проблемы. Я использую jQuery для установки href-атрибут javascript:; (Не ' ', или браузер перезагрузит страницу), если ширина окна браузера больше 1'000px. Вам нужно добавить ID в свою ссылку. Вот что я делаю:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

может быть, это полезно для вас.

использовать OnClientClick = "return false;"

вы также можете просто" не " добавить url-адрес внутри <a> тег, я делаю это для меню <a> бирка управляемая с падениями также. Если нет выпадающего списка, я добавляю url-адрес, но если есть выпадающие списки с <ul> <li> list я просто удаляю его.

Я столкнулся с аналогичными проблемами:

1. Я столкнулся с этой проблемой в директиве, я исправил ее, добавив a в качестве родительского элемента и сделав pointer-events: none для этого

2. вышеуказанное исправление не работало для тега select, затем я добавил курсор:текст (это было то, что я хотел), и это сработало для меня

Если нужен обычный курсор, вы можете добавить курсор:по умолчанию

лучшее решение:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

отлично работает во всех браузерах