css 'указатель-события' альтернатива свойства для IE

Question

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

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

pointer-events: none;

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

Есть идеи?

Answer 1

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

Однако я нашел решение:

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

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

Существует также другое решение Javascript здесь .

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

Answer 2

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

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

Пример:

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

});

Answer 3

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

Answer 4

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

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

IE обрабатывает это как элемент disabled и не вызывает событие щелчка. Однако 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"

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

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

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

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

Answer 9

Я столкнулся с похожими проблемами:

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

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

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

Answer 10

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