✔ jQuery - mehrere Events wahlweise um Funktion auszulösen?

[shredder01]

Hallo,

ich bin gerade dabei das wunderbar minimale vTip-jQuery-Plugin http://www.vertigo-project.com/projects/vtip etwas für meine Zwecke zu modifizieren. Das Plugin ist darauf ausgerichtet beim hovern zu reagieren. Ich würde jetzt gerne noch zusätzlich das Reagieren auf focus bzw. blur haben, so wie es das NiceTitle-Plugin http://www.wordpress.dotflare.com/nicetitle-plugin/ beherrscht.
Ich bin mir bloß nicht so recht im Klaren darüber, wie ich bei Verwendung von jQuery mehrere Events als Auslöser für eine Funktion angeben kann.
Irgendwie brachte mich auch eine entsprechende Suche per Google nicht weiter.
Ist so etwas möglich und wenn ja wie?

 

[Sven Mintel]

Moin,

das geht recht simpel mit bind()

Kurzes Beispiel:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<!--
$(document).bind('click focus blur keypress', function(event) {
  $('body').prepend('<div>'+event.type+'</div>');
});
//-->
</script>

 

[shredder01]

Ah, ok ... ich hab irgendwie nirgends finden können (was nicht heißen muß, dass es nirgends steht ), dass man das so stapeln kann bei bind().
Gut zu wissen.
Hm, irgendwie funktioniert meine Umsetzung davon bloß nicht: Im Original-Script von vTip wird die fragliche Funktion ja durch hover() ausgelöst und hover() kombiniert ja im Prinzip mouseover und mouseout. Das ist dort ungefähr so

$("a[title], acronym, abbr").unbind().hover(
       
        function(e) {
	    /*irgendwelcher Code*/
            $('p#vtip').fadeIn("slow");
           
        },
        function() {
               $("p#vtip").fadeOut("slow").remove();
        });

gelöst. Funktioniert das dann bei der von Dir beschriebenen Geschichte mit bind() auch so?
Ich hab jetzt folgendes gemacht:

   $("a[title], acronym, abbr").bind('mouseover mouseout focus blur',
       
        function(e) {
            /*irgendwelcher Code*/
            $('p#vtip').fadeIn("slow");
           
        },
        function() {
             $("p#vtip").fadeOut("slow").remove();
        }
	  	
    );

Das bringt mir zwar keine Fehlermeldungen, aber dafür auch keine vTip-gestylten Tooltips, sondern nur Standard-Tooltips, die dazu auch statt des Inhalts des title-Attributes das Wort "undefined" enthalten.
Was mache ich hier falsch?

P.S. Ok, wenn ich die zweite anonyme Funktion entferne, dann funktionieren die vTip-Tooltips wieder. Allerdings nicht wie gewünscht. 1. Sie funktionieren weiterhin nur bei Mausbedienung und 2. Wenn ich über mehrere Links hovere, dann stapeln sich die Tooltips. Da muß dann wohl noch irgendwo ein unbind dazwischen.
Und ich muß noch eine Alternative für die zweite Funktion finden.

P.P.S. Ok, nächster Versuch. Ich hab jetzt nach ein paar Überlegungen folgendes probiert:

$("a[title], acronym, abbr").unbind().bind('mouseover focus', 
       
        function(e) {
		 
          $('p#vtip').fadeIn("slow");
           
        }
	  	
    ).bind('mouseout blur',
	
        function() {
                     $("p#vtip").fadeOut("slow").remove();
        });

Mit dem Ergebnis, dass ich jetzt wieder den Ausgangszustand habe (immerhin ). Was aber aus unerfindlichen Gründen nicht will, ist das Auslösen bei Tastaturbedienung. Ich hab testweise auch mouseover und mouseout enfernt, so dass nur focus und blur als auslösende Ereignisse übrigblieben. Damit hab ich dann jedoch bloß die Default-Tooltips (die ohne JS oder vTip-Plugin).

Im Moment verstehe ich noch nicht, wo da der Fehler ist.
Falls zufälligerweise, widererwarten hier irgendwo 'ne Klammer fehlen sollte, dann kommt das nur davon, dass ich versucht habe, nur das wichtigste komprimiert herauszukopieren und dabei dann etwas übersehen hab. Daran sollte es in diesem Fall also mal nicht liegen .

P.P.P.S. Ok, es stimmt nicht ganz, was ich im letzten Abschnitt schrieb -> Die Tooltips werden doch bei focus ausgelöst ... allerdings erscheinen sie an der falschen Stelle. Nämlich ganz unten auf der Seite. Sehr witzig. Na mal schauen, ob ich das noch gelöst bekomme.

 

[Sven Mintel]

P.P.P.S. Ok, es stimmt nicht ganz, was ich im letzten Abschnitt schrieb -> Die Tooltips werden doch bei focus ausgelöst ... allerdings erscheinen sie an der falschen Stelle. Nämlich ganz unten auf der Seite. Sehr witzig. Na mal schauen, ob ich das noch gelöst bekomme.

Das Skript wird höchstwahrscheinlich bei mouse-Events die Cursor-Position ermitteln, und dort den Tooltip platzieren.
Wenn du dich per Tastatur durchs Dokument bewegst, funktioniert das nicht, weil der Curosr ja irgendwo ist.
Es sollte möglich sein, statt der Mausposition auch mit der Position des auslösenden Elementes zu Arbeiten.

 

[shredder01]

Das Skript wird höchstwahrscheinlich bei mouse-Events die Cursor-Position ermitteln, und dort den Tooltip platzieren.

Ja, genauso ist es auch. Das hatte ich vorher übersehen bzw. gedanklich ausgeblendet.