Weiterleiten von Mausereignissen durch Ebenen / divs

Ich es einmal Tat. Hier ist der code:

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

bitte beachten Sie, dass ich nur auf neue Versionen von Firefox und Chrome.

InformationsquelleAutor der Antwort wildcard

Den jQuery Forward Maus-Event-Beispiel hier gegeben werden, ist Teil eines größeren Rahmens und auch nur herauszufinden, dass viel von der gegebenen Webseite war eine lästige Pflicht.

Ich daher schrieb den code als standalone-jQuery-plugin.

Hier das Github repository:

https://github.com/MichaelPote/jquery.forwardevents

Leider, das Ziel war ich mit es für - überlagerung einer Maske über Google-Maps nicht erfassen klicken Sie auf und ziehen Sie Ereignisse an, und der Mauszeiger ändert sich nicht abbaut die Benutzererfahrung genug, dass ich gerade beschlossen, zu verbergen, die Maske unter IE und Opera - die beiden Browser nicht-support-pointer-events.

InformationsquelleAutor der Antwort Mikepote

Da die JQuery Forward Maus-Event-Beispiel link ist derzeit tot, ich schrieb einige jQuery-code zur Behandlung von ein einfacher Fall:

1. overlay-div mit einem transparenten Bild und keine links
2. Unterlage div mit links

Ziel: halten overlay sichtbar machen-links und cursor ändern, wenn über einen link.

Methode: vergleichen Sie die Maus-Position zu jedem link offset().

Ich nicht behandeln allgemeiner Maus-events, die ich gerade behandeln die Ereignisse, die ich brauche ad-hoc. Es ist also wirklich ein workaround, statt die beste Lösung, die es mit jeder Maus-Ereignis Abstrakt, so etwas wie mit Wildcard über quickDelegate() nach überprüfung der geometrie. Auch ich nur über bestimmten link-Elemente, nicht die ganze geschichtet 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);
});

Über die geometrie Funktion "mouse_event_over_element ()" können Sie mit anderen Ereignissen und Elementen.

Tun: herausfinden, was die Maus-Ereignisse auslösen der tooltip, der über <a title="foo"> - und trigger (), oder replizieren, zeigt der tooltip. Dasselbe für die status-Zeile.

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

Bearbeiten 2014/09

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

Benutzer user2273627 sggested:

Für den Standard-tooltip und Statuszeile können Sie die z-index
css-Eigenschaft. Prüfen Sie, ob sich die Maus über einem link und legen Sie den z-index
für diesen link. $(this).css('z-index','9'); Setzen Sie ein anderes, wenn die Maus
nicht über einem element, und legen Sie den z-index auf auto. Stellen Sie sicher, dass Sie
die zugrunde liegenden links position: relative in der css-Datei, sonst
z-index funktioniert nicht.

InformationsquelleAutor der Antwort kitchin