Свойство 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 реализация этой функции (вдохновленная статьей блога Шеа Фредерик, которую упоминает Кайл):
Ответ 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;}
отлично работает во всех браузерах