Как заставить Internet Explorer эмулировать события указателя: нет?

Я работаю над проектом, в котором мы улучшаем высокие графики, отображая PNG-градиент над графиками. Мы используем CSS pointer-events:none; чтобы позволить пользователям взаимодействовать с диаграммой, несмотря на то, что сверху есть слой div. IE не распознает pointer-events:none;Таким образом, пользователи IE не могут иметь улучшенный дизайн диаграмм или не могут взаимодействовать с диаграммами. Я ищу способ получить IE, чтобы позволить событиям мыши (особенно при наведении курсора), проходить через div к элементам под ним.

Вы можете увидеть модель того, с чем мы работаем, здесь: http://jsfiddle.net/PFKEM/2/

Есть ли способ заставить IE сделать что-то вроде pointer events:none;где события мыши проходят через элемент, чтобы элементы взорвать их?

Источник

7 ответов

Решение

Надеюсь это поможет:)

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Вы также можете попробовать решение javascript:

http://jsbin.com/uhuto

Источник

Internet Explorer распознает события указателя: нет, но только для элементов SVG, поскольку события указателя указаны только для элементов SVG в спецификации W3C ( http://www.w3.org/TR/SVG/interact.html).

Вы можете попробовать это с чем-то вроде этого...

CSS:

#tryToClickMe{

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    }

HTML:

<svg id="tryToClickMe"></svg>

Это работает в IE9 и IE10 (я проверял это). Если вы еще не используете элементы SVG, то есть возможность обернуть существующие элементы в SVG. Библиотека jQuery предоставляет для этого метод обтекания ( http://api.jquery.com/wrap/).

Есть очень хорошая немецкая статья, которая разбила характеристики свойства событий указателя: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - Там вы будете найти (с помощью Google Translate) больше информации.

Надеюсь я смогу помочь

Бенни

PS Если вы хотите получить доступ к вышележащим и нижележащим объектам, вы можете использовать метод document.msElementsFromPoint в IE ( http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). Это даст вам все слои в данной точке массива.

Источник

Просто потратил два дня, исследуя это для проекта IE10 (IE10 не поддерживает события указателя: нет свойства CSS, MS проголосовала за отзыв спецификации из-за возможных проблем с кликбэком). Обходной путь должен иметь встроенный тег SVG и устанавливать события указателя в SVG. Я продолжал пытаться использовать, например, тег IMG с SVG src, или DIV с background-image, установленным в файл SVG (где я использовал бы pointer-events="none"), даже SVG data-uris, но это не так Мне не приходило в голову, что наличие его в отдельном элементе точно требует CSS-свойства невыполненных указателей-событий.

Таким образом, вам нужен простой SVG, такой как: Сначала немного CSS, например:

    .squareBottomRight {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

А потом в HTML:

    <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg"
        pointer-events="none">
        <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/>
    </svg>

Ссылка: https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050

Источник

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

        });
Источник 
$.fn.passThrough = function (target) {
    var $target = $(target);
    return this.each(function () {
        var style = this.style;
        if ('pointerEvents' in style) {
            style.pointerEvents = style.userSelect = style.touchCallout = 'none';
        } else {
            $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) {
                $target.each(function() {
                    var rect = this.getBoundingClientRect();
                    if (e.pageX > rect.left && e.pageX < rect.right &&
                        e.pageY > rect.top && e.pageY < rect.bottom)
                        $(this).trigger(e.type);
                });
            });
        }
    });
};

http://jsfiddle.net/yckart/BQw4U/

$('.overlay').passThrough('.box');
$('.box').click(function(){
    $(this).toggleClass('active');
});
Источник

CSS:

#red_silk { 
  width:100%;
  background: url('../img/red_silk.png') no-repeat center top;
  height:393px;
  z-index: 2; 
  position: absolute; 
  pointer-events: none; 
}

СТАРЫЙ HTML:

<div id="red_silk"></div>

НОВЫЙ HTML:

<svg id="red_silk"></svg>
Источник

Добавление следующего CSS отключит указатели ms.

#container{
    -ms-touch-action: none;
}
Источник
Другие вопросы по тегам