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

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

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

pointer-events: none;

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

Любые идеи?

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

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

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

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

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

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

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

});

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

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

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

• Указатель событий 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 и ниже.

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

Javascript:

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

JQuery:

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

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

Я нашел другое решение, чтобы решить эту проблему. Я использую 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:;'); 
}

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

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

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

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

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

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

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

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

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

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