Guten Tag Webhilfe-Community,
nach wenigen Minuten umschauen war ich mir sicher das ich mich mit meinem Problem an euch wenden kann.
Ich schreibe z.Z. ein kleines Projekt für ein MyBB-Forum in JavaScript, also nichts großes. Es läuft ausschließlich in JS und beansprucht keine Datenbankabfragen oder ähnliche PHP-Anwendungen.
Nun ist es ein Teil dieses Scripts, beim Klicken eines <p>-Tags ein zuvor verstecktes (wahlweise display:none) <table> sichtbar zu machen (ist weiterhin kein Problem) und diesen relativ zu den Mousekoordinaten zu postionieren (position:absolute)
Nun kommt mein eigentliches Problem; da ich ja die Mousekoordinaten möchte, verwende ich das event.clientX/Y, dieses erwartet natürlich für das event ein Ereigniss. Sofern ich einen globalen event handler "onclick" definiere bekomme ich mit window.event.clientX/Y die Mouseposition zurückgeliefert.
Sofern ich dies jedoch mit dem <p onClick> mache bekomme ich lediglich ein Fehler angezeigt, dass ein window.event nicht existiere.
Daher meine Frage: wie muss ich dies definieren, das ich nach dem Klick auf das <p>-Element die Mausposition geliefert bekomme?
Sofern dieses Problem gelöst wird hätte ich noch eine weitere Frage, die sich aber schon aus der Antwort von diesem Problem ableiten lassen könnte.
Ich freue mich auf jegweilige Hilfe,
mfg,
fakerlol
ich habe mir den quelltext genau angeschaut und versucht einige tests zu machen, jedoch kommt es auf das gleiche hinaus;
sofern es mit einem globalen eventhandler wie dem document.mousemove gemacht wird habe ich auch keine probleme, da als event selbiges zurückgegeben werden kann, so kann man durch window.event.clientX oder durch ereignis.clientX (ereignis als parameter zurückgegeben von document.onmousemove) die Mouseposition ermitteln.
Jedoch ist in meinem Fall folgende Anordnung maßgebend:
Code:
<p onClick="test()">Test-Text</p>
die funktion test() soll nun die Position des Mousecursors ermitteln, es hört sich alles einfach an, aber seitdem es in einer PHP-Site, genauer dem Header eines MyBB-Forums ausgeführt wird, bekomm ich andauernd diese Probleme.
Ich möchte nämlich erreichen das ich diese o
nClick="test()" später in jedes erdenklich Tag einsetzen kann, ein <p>-Tag ist nicht dringend erforderlich.
Ich komme aber nicht dahinter was nun genau das Ereigniss ist, welches das clientX/Y erwartet; bei nem globalen event.handler ist es selbsterklärend, das ein globaler event zurückgegeben wird und das clientX einen Bezugspunkt hat, das onclick in einem html-tag jedoch reicht nicht aus, um diesen Schlüssel-Event auszulösen...
Ich bin wirklich ratlos, dabei habe ich schon soviele Projekte in JS realisiert die das gleiche tun mussten, und erst in einer PHP-Site bekam ich nun diese Probleme, ich hoffe jemand weiß weiter :/
Willst du es so? Hab mal das Skript aus diesem Artikel genommen und leicht verändert.
Du musst aber warten, bis der Ladevorgang der Seite (verzögert sich aufgrund der Werbung) abgeschlossen ist, da ansonsten das Skript nicht initialisiert wird. ^^
http://parabrain.pa.funpic.de/fakerlol/
Erst mal danke das du dir die Zeit nimmst mein Problem aufzugreifen.
Ich hatte keine Probleme mit dem Laden da ich Adblock Plus draufhabe und somit keine Werbung angezeigt wird xD
Nun zum quelltext; ich kann nach dieser Modifikation nachvollziehen wie es funktioniert, jedoch stört mich eine Tatsache; es ist wieder nur mit gobalen event.handler gelöst. Das bedeutet die Tabelle wird andauernd neu positioniert, wenn man irgendwo im Dokument draufklickt. Einzig wenn man auf das gewünschte Element klickt wird die Tabelle sichtbar. Dies ist in der Weise ineffizient, da die Tabelle auf die Weise die ganze Zeit bearbeitet wird.
Ich weiß es ist viel verlangt als newbie der grad in diesem Board aktiv wird, aber gibt es keine Möglichkeit es "direkt" zu lösen?
Ich meine nehmen wir uns mal den IE als Vorbild und vergessen wir mal das W3C;
man kann hier ganz einfach per onClick die Position durch window.event.x/y ermitteln, warum ist dies in FF nicht möglich? Fast alles, was im IE direkt ansteuerbar ist, wird im FF entweder garnicht oder nur durch umschreiben von mehreren Codezeilen möglich.
Gibt es denn im FF nicht auch eine Möglichkeit, wie man die Mouseposition erfahren kann,
nachdem das entsprechende Element geklickt ist? Bisher wurde es ja so gelöst das nach jedem Klick global diese Ermittlung stattfand.
Ich freue mich auf jede neue Antwort und entschuldige mich schonmal das ich so viele Fragen um das gleiche Thema stelle
/edit
als beispiel verwende ich diese Seite:
http://gg-fraction.de.vu
das rote, absolute positionierte <p>-Tag hat ein onclick-handler der eine funktion aufruft.
Diesen kann man im quelltext nachlesen.
Ach so, du möchtest also, dass sich die Tabelle dann mit dem Mauszeiger bewegt? Hm, vielleicht überleg ich mir heut Abend nochmal was... ^^
Gib die Hoffnung nicht auf!
@andere Board-Mitglieder: Was ist denn mit euch? *gg*
Soo..
guck mal hier:
http://webmatze.de/webdesign/javascript/tooltips.htm
Umgeschrieben für dich:
Code:
<style type="text/css">
.tooltip {
position: absolute;
display: none;
background-color: #FFFFFF;
}
</style>
<script>
<!--
wmtt = null;
show = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
if (wmtt != null) {
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
}
}
function showWMTT(id) {
if (show == null) { show = 1;}
else { show = null; hideWMTT();}
wmtt = document.getElementById(id);
wmtt.style.display = "block"
}
function hideWMTT() {
wmtt.style.display = "none";
}
//-->
</script>
<div class="tooltip" id="1">
Dies ist unser erster Tooltip
</div>
<p onclick="showWMTT('1')">Unser Link</p><br><br>
Weiß nu net, obs auch so funkt...nen bissl umgeschrieben..
Im Endeffekt ist es das gleiche wie zuvor der Quellcode von Para.
Ich danke euch vielmals für eure Hilfe, ich habe nun gesehen wie ichs machen kann, ich habe mich auch in anderen Foren kundig gemacht und wie es aussieht bleibt mir nach dem W3C nur diese Methode es über nen globalen eventhandler laufen zu lassen.
Damit ist mein Problem fürs erste gelöst ^_^'
Theoretisch dürfte das nicht der gleiche Code sein, da die Box auch bei einer Bewegung an der Maus hängen bleiben muesste, aber nja...
Da du dein Prob ja gelöst hast
mfg