Свойство css 'pointer-events' альтернатива IE

У меня есть раскрывающееся меню навигации, в котором часть заголовка не должна переходить на другую страницу при нажатии (эти названия открывают выпадающее меню при нажатии), в то время как другие должны перемещаться (у них нет выпадающего меню и навигации напрямую). Однако оба типа имеют href, определенные им

Чтобы решить эту проблему, я добавил следующий css для первого типа титров

pointer-events: none;

и он работает отлично. Но поскольку это свойство не поддерживается IE, я ищу работу. Досадно, что у меня нет доступа и привилегий для полного изменения кода HTML и JavaScript.

Любые идеи?

Ответ 1

Pointer-events - это взлом Mozilla и где он реализован в браузерах Webkit, вы не можете ожидать его увидеть в браузерах IE еще на миллион лет.

Однако есть решение, которое я нашел:

Пересылка событий мыши через слои

Это использует плагин, который использует некоторые не известные/понятные свойства Javascript для принятия события мыши и отправки его другому элементу.

Здесь также есть другое решение Javascript .

Обновление за октябрь 2013 года: по-видимому, он подходит к IE в версии 11. Источник. Спасибо Тиму.

Ответ 2

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

Ответ 3

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

Захват события "mousedown" для верхнего элемента (элемент, который вы хотите отключить события указателя).
В "mousedown" скрыть верхний элемент.
Используйте 'document.elementFromPoint()', чтобы получить базовый элемент.
Показать верхний элемент.
Выполните необходимое событие для базового элемента.

Пример:

//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;

});

Ответ 4

Стоит отметить, что специально для 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"

Ответ 5

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

События указателя Polyfill.

Ответ 6

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

Это использует 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();

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

Ответ 7

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

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

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

Ответ 8

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

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

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

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

Ответ 9

Используйте OnClientClick = "return false;"

Ответ 10

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

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

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