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

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

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

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

ОТВЕТЫ

Ответ 2

Internet Explorer распознает события указателя: none, но только для элементов 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). Дополнительная информация.

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

Бенни

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

Ответ 3

Просто провел два дня, исследуя это для проекта IE10 (IE10 не поддерживает события-указатели: ни одно свойство CSS, MS не проголосовало за снятие спецификации из-за возможных проблем с щелчком). Обходным путем является наличие INLINED SVG-тега и установка указателей-событий в SVG. Я продолжал пытаться использовать, например. тег IMG с SVG src или DIV с фоновым изображением, установленным в SVG файл (где я бы использовал указатель-события = "нет" ), даже SVG-данные-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

Ответ 4

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

        });

Ответ 5

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

Ответ 6

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; 
}

OLD HTML:

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

Новый HTML:

<svg id="red_silk"></svg>

Ответ 7

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

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