css альтернатива властивості покажчика-події для IE

У мене є спадне меню навігації, в якому частина заголовка не повинна переходити до іншої сторінки при натисканні (ці заголовки відкривають випадаюче меню при натисканні на нього), а інші повинні переходити (у них немає спадного меню та безпосередньо переходити). Однак, обидва типи їх hrefвизначили

Для вирішення цього питання я додав наступний css для колишнього типу заголовків

pointer-events: none;

і він працює чудово. Але оскільки ця властивість не підтримується IE, я шукаю певну роботу. Прикро, що я не маю доступу та привілею повністю змінювати код HTML та JavaScript .

Будь-які ідеї?

Pointer-події - це злом Mozilla, і там, де він був реалізований у веб-браузерах, ви не можете розраховувати побачити його в браузерах 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"

Ось невеликий сценарій, що реалізує цю функцію (натхненний статтею блогу Ши Ши Фредеріка, яку згадує Кайл):

• Покажчик Події 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 і нижче.

EDIT: Використання цього рішення не працює, коли ви клацаєте текстові поля нижче прозорого елемента. Щоб вирішити цю проблему, я використовую фокус, коли користувач натискає на текстове поле.

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>тегами керується спадами. Якщо не випадає, я додаю URL, але якщо є спади зі <ul> <li>списком, я просто видаляю його.

Я стикався з подібними проблемами:

1. Я зіткнувся з цією проблемою в директиві, і я виправив її, додавши в якості свого батьківського елемента і роблячи вказівники події: жоден для цього

2. Наведене вище виправлення не працювало для вибору тегу, тоді я додав курсор: текст (що було те, що я хотів), і він працював для мене

Якщо потрібен звичайний курсор, ви можете додати курсор: за замовчуванням

Найкраще рішення:

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

Працює ідеально у всіх браузерах