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

Question

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

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

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

Answer 1

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

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

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) дополнительную информацию.

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

Benny

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

Answer 2

Просто потратил два дня, исследуя это для проекта 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

Answer 3

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

        });

Answer 4

$.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');
});

Answer 5

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>

Answer 6

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

#container{
    -ms-touch-action: none;
}