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


155

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

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

pointer-events: none;

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

Любые идеи?


2
Есть ли способ получить доступ к HTML и скриптам? Попробуйте поговорить с тем, кто дал вам задание.
Кайл

@Kyle Это не совсем проблема привилегий, есть некоторые технические трудности также для изменения html / javascript кода
anupam



3
Обратите внимание, что pointer-eventsтеперь в IE11 +
Дэвид Стори

Ответы:


88

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

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

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

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

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

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


4
Документация ie9 говорит, что поддерживает это свойство (однако я пока не пробовал ie9). В любом случае, у меня уже были идеи, которые даны в ссылках, но, поскольку я искал какое-то конкретное решение для css, я не могу их использовать. Я попытаюсь изменить код html / js, скорее потратив время на решение этой проблемы.
Большое спасибо

11
На W3C эта проблема обсуждалась из-за перехвата кликов . Практическое правило: как только W3C опубликует рекомендацию кандидата, команда IE выполнит ее, и всегда есть урок, что спешка теряет . Кроме того, Mozilla сказал все это: « Предупреждение: использование событий указателя в CSS для элементов, не относящихся к SVG, является экспериментальным. Раньше эта функция была частью проекта спецификации пользовательского интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4». . "
вулкан ворон

8
Согласно caniuse.com, события CSS-указателя поступают в IE 11. caniuse.com/#feat=pointer-events
Тим

4
Это не повод для занижения ответа @eyurdakul
scumah

14
"you can't expect to see it in IE browsers for another million years."Прошло всего 3 года ...
Задачи

20

Вот еще одно решение, которое очень легко реализовать с помощью 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;

});

2
Это сработало для меня. Я предпочитаю небольшие исправления, которые я могу добавить в свой js-код, вместо этого добавив много полифиллов;)
dippas

Это креативное решение, мне это нравится. Единственная проблема заключается в ненужную для обработки в браузеры , где точечные события делают работу. Было бы здорово, чтобы это выполнялось только в условных браузерах IE.
Тревор

Я согласен, это быстро реализуемая проблема, но фактически в моей реализации я применяю ее только в том случае, если браузер IE, вы помещаете ее в эту проверку: if (navigator.appName == 'Microsoft Internet Explorer' ) {... логика идет сюда ..}
MarzSocks

3
это работает очень хорошо! так как то есть якобы 11 начали поддерживать события указателя, я просто обертываю их внутри этого предложения: if (navigator.userAgent.toLowerCase (). indexOf ('msie')> 0) СПАСИБО!
Хэнк

17

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


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

10

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


1
Это не сработало для меня. В IE9-10 функции onclick все еще выполняются.
конечно,

6

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


1
Это не работает, если элементы являются тегами привязки, я полагаю. По крайней мере, у меня это не сработало.
Колин ДеКлю

4

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

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

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


1
Я использовал аналогичную идею с атрибутом disabled. В IE добавление отключенного атрибута предотвращает события щелчка, но если есть дочерние элементы, они все равно будут вызывать щелчок. покрытие детей, чтобы они не были кликабельными, является отличным решением для этого. Мне пришлось использовать цвет фона с непрозрачностью 0, чтобы в IE регистрировался фактический элемент.
Блейк Пламб

4

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

Это использует 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 и ниже.

РЕДАКТИРОВАТЬ: Использование этого решения не работает, когда вы нажимаете текстовые поля под прозрачным элементом. Чтобы решить эту проблему, я использую фокус, когда пользователь нажимает на текстовое поле.

Javascript:

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

JQuery:

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

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


1

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

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

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

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



0

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


0

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

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

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

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


-1

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

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

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


3
За исключением версии IE <11, где события указателя не поддерживаются. Я думаю, что вы упустили момент.
тюремный микрофон
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.