Пересылка событий мыши через слои/divs

Ответ 1

Вы можете сделать все это или можете просто использовать этот CSS для этого div:

pointer-events: none

Ответ 2

Я сделал это один раз. Здесь код:

quickDelegate = function(event, target) {
            var eventCopy = document.createEvent("MouseEvents");
            eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
                event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
                event.shiftKey, event.metaKey, event.button, event.relatedTarget);
            target.dispatchEvent(eventCopy);
            // ... and in webkit I could just dispath the same event without copying it. eh.
        };

обратите внимание, что я ориентировался только на новые версии Firefox и Chrome.

Ответ 3

В настоящее время реализована реализация jQuery перенаправления событий ExtJS script:

Пример события JQuery Forward Mouse

Ответ 4

пример JQuery Forward Mouse Event, данный здесь, является частью более крупной структуры и даже просто вычисляет, что многое из данного сайта было трудоемким,

Поэтому я переписал код как автономный плагин jQuery.

Здесь репозиторий Github:
https://github.com/MichaelPote/jquery.forwardevents

К сожалению, цель, которую я использовал для - наложения маски поверх Карт Google, не фиксировала события перетаскивания и перетаскивания, а курсор мыши не менял, что ухудшает работу пользователя достаточно, что я просто решил скрыть маску под IE и Opera - два браузера которые не поддерживают события указателя.

Ответ 5

Вы можете попробовать использовать jquery для изменения z-индекса div, когда вы наводите на него курсор, так что ссылка временно находится над div при зависании над указанным div.

Ответ 6

Так как ссылка JQuery Forward Mouse Event Example в настоящее время не работает, я написал код jQuery для обработки простого случая:

• overlay div с прозрачным изображением и без ссылок
• подкладка div со ссылками

Цель: сохранить видимость наложения, сделать работу ссылок и изменение курсора по ссылке.

Метод: сравните местоположение мыши с каждым смещением ссылки().

Я не обрабатываю общие события мыши, я просто рассматриваю события, которые мне нужны ad-hoc. Таким образом, это действительно обходное решение вместо лучшего решения, которое абстрактно обрабатывало бы каждое событие мыши, что-то вроде использования Wildcard над quickDelegate() после проверки геометрии. Также меня интересуют только некоторые элементы ссылок, а не все слоистые DOM.

function mouse_event_over_element(evt, elem) {
  var o= elem.offset();
  var w= elem.width();
  var h= elem.height();
  return evt.pageX >= o.left && evt.pageX <= o.left + w && evt.pageY >= o.top && evt.pageY <= o.top + h;
}

$(overlay_selector).click(function(e){
  $(underlay_selector + ' a').each(function() {
    if (mouse_event_over_element(e, $(this))) {
      // $(this).click(); // trigger a jQuery click() handler
      // quickDelegate(e, this); // not in IE8
      // this.click(); // maybe not in Mozilla pre-HTML5
      window.location.href= this.href;
      return false;
    }
  });
});

$(overlay_selector).mousemove(function(e){
  var newcursor= 'default';
  $(underlay_selector + ' a').each(function() {
    if (mouse_event_over_element(e, $(this))) {
      newcursor= 'pointer';
      // $(this).mouseenter(); // trigger a one-argument jQuery hover() event (no mouseleave)
      return false;
    }
  });
  $(overlay_selector).css('cursor', newcursor);
});

Используя функцию геометрии 'mouse_event_over_element()', вы можете обрабатывать другие события и элементы.

Сделать: выяснить, какие события мыши вызывают всплывающую подсказку над <a title="foo">, а также вызвать триггер() или реплицировать всплывающую подсказку. То же самое для строки состояния.

..............................

Изменить 2014/09

..............................

Пользователь user2273627 sggested:

Для всплывающей подсказки по умолчанию и строки состояния вы можете использовать z-index CSS-свойство. Проверьте, находится ли мышь над ссылкой и установите z-index для этой ссылки. $(Это).css( 'г-индекс', '9'); Поместите другое, когда мышь не над элементом и устанавливает z-индекс в auto. Убедитесь, что вы установили позиция базовых ссылок: относительная в css файле, в противном случае z-index не будет работать.