События указателя состояния при наведении: нет Резервный вариант Javascript

У меня есть изображение, за прозрачной частью которого находится элемент списка, на который можно навести курсор. Изображение должно быть в верхней части элемента списка. Это может быть достигнуто с

pointer-events:none;

на изображении.

Однако версии IE ниже 11 не поддерживают это правило. Мне удалось найти несколько javascript-решений для событий по щелчку, но ни одно из них не работает при простом наведении курсора на элемент списка.

JsFiddle: http://jsfiddle.net/9Y9TH/2/

При наведении NAV 3 появится всплывающее подменю. Когда вы перемещаете курсор в область изображения, которая находится поверх него, подменю исчезнет в IE, так как IE не поддерживает события указателя: нет;


javascript hover pointer-events
person Pepe    schedule 03.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Лучший способ, вероятно, вызвать метод getClientBoundingRects вашего элемента DOM, который возвращает верхнюю, правую, нижнюю и левую части рассматриваемого элемента относительно области просмотра, а затем сравнить это с положением мыши. Этот код будет выполняться всякий раз, когда пользователь перемещает мышь (часто!), поэтому я бы посоветовал запустить тест Modernizr для pointer-events перед его выполнением, так как это может излишне замедлить работу:

$( 'body' ).on( 'mousemove', function isPositionedOnElement( mouseEvent ){
  var elementBox = yourElement.getBoundingClientRects();

  if (
    elementBox.top    <= mouseEvent.screenY &&
    elementBox.bottom >= mouseEvent.screenY &&
    elementBox.left   <= mouseEvent.screenX &&
    elementBox.right  >= mouseEvent.screenX
  ){
    // Your element is being hovered over!
  }
} );
person Barney    schedule 03.12.2013
comment
так как это может замедлить работу, я думаю, лучше найти другое решение, которое избавится от изображения? - person Pepe; 03.12.2013
comment
@PépéArtist возможно, но это будет зависеть от более широкой проблемы. Можете ли вы воспроизвести проблему с jsFiddle? Возможно, мы сможем найти менее сложное решение! - person Barney; 04.12.2013
comment
Добавлен jsFiddle. Возможно, идея состоит в том, чтобы активировать проверку мыши при наведении курсора на элемент списка? - person Pepe; 07.12.2013