Mauszeigerposition im Firefox

[Nick]

Hi, ich hatte mich schon einmal gemeldet mit dem Thema bewegliche Elemente.
Läuft jetzt auch mittlerweile ziemlich rund. Ie, Opera, Safari und Chrome spielen da ganz toll mit, nur alleine der Firefox macht mir Schwierigkeiten.
Hab mir schon die unterschiedlichsten Lösungsvorschläge im Netz angeguckt, aber ich krieg sie einfach nicht zum laufen.

<div id="1" onmousedown="start('1')"></div>  
<div id="2" onmousedown="start('2')"></div>  
<div id="3" onmousedown="start('3')"></div>

<script type="text/javascript">  
	start = function(id) {  
		mausX = event.clientX - document.getElementById(id).offsetLeft  
		mausY = event.clientY - document.getElementById(id).offsetTop  
		document.getElementById(id).style.zIndex = 2  
		document.getElementById(id).onmousemove =  function() { move(id,mausX,mausY) }  
		document.getElementById(id).onmouseup =  function() { stop(id) }  
		}  
	move = function(id,mausX,mausY) {  
		document.getElementById(id).style.top = event.clientY - mausY  
		document.getElementById(id).style.left = event.clientX - mausX  
		}  
	stop = function(id) {  
		document.getElementById(id).style.zIndex = 1  
		document.getElementById(id).onmousemove = null  
		document.getElementById(id).onmouseup = null  
		}  
</script>

das ist der Code, den ich benutze.
Es muss ja an dem "event.clientX/Y" liegen, ansonsten bekäme ja der Firefox die nötigen Daten.
Hab auch schon herausgefunden, dass event und event.window nicht mit Firefox kompatibel sind, habe mich dann für die Variante "e.pageX/Y" entschieden.
Aber die will auch einfach nicht.

Deswegen will ich hier direkt fragen, was ich an der Stelle falsch mache.

Dankeschön schonmal im Voraus.

[ChrisB]

Hi,

Läuft jetzt auch mittlerweile ziemlich rund. Ie, Opera, Safari und Chrome spielen da ganz toll mit, nur alleine der Firefox macht mir Schwierigkeiten.

Und welche?

Es muss ja an dem "event.clientX/Y" liegen, ansonsten bekäme ja der Firefox die nötigen Daten.

*Was* muss daran liegen?

Hab auch schon herausgefunden, dass event und event.window nicht mit Firefox kompatibel sind, habe mich dann für die Variante "e.pageX/Y" entschieden.

Abgesehen davon, dass ich die beiden Eigenschaften in deinem Code nicht sehe - hast du denn auch ein "e" übergeben?

Aber die will auch einfach nicht.

Deswegen will ich hier direkt fragen, was ich an der Stelle falsch mache.

In der Zeile über dieser hast du "funzt nich" mit einer Problembeschreibung verwechselt.

MfG ChrisB

[Nick]

Und welche?

Wonach fragst du da jetzt genau? Ich habe doch die Browser alle aufgezählt. Oder willst du die Version?
Die sind alle auf dem neuesten Stand. Safari 4.03, Opera 10, Firefox 3.5, Ie 8, Chrome 2

Abgesehen davon, dass ich die beiden Eigenschaften in deinem Code nicht sehe - hast du denn auch ein "e" übergeben?

Welche beiden? also "event" ist bestimmt da drin. "event.window" hab ich nicht mehr benutzt, weil es bei den Browsern zumindest für mich keinen unterschied zu "event" macht, aber das ist ja auch nicht das problem

mit "e" hatte ich es so eingebaut:

<script type="text/javascript">  
        start = function(id,e) {  
                mausX = e.pageX - document.getElementById(id).offsetLeft  
                mausY = e.pageY - document.getElementById(id).offsetTop  
                document.getElementById(id).style.zIndex = 2  
                document.getElementById(id).onmousemove =  function() { move(id,mausX,mausY) }  
                document.getElementById(id).onmouseup =  function() { stop(id) }  
                }  
        move = function(id,mausX,mausY,e) {  
                document.getElementById(id).style.top = e.pageY - mausY  
                document.getElementById(id).style.left = e.pageX - mausX  
                }  
        stop = function(id) {  
                document.getElementById(id).style.zIndex = 1  
                document.getElementById(id).onmousemove = null  
                document.getElementById(id).onmouseup = null  
                }  
</script>

Im Netz hatte ich gelesen, dass der Browser "e" automatisch den richtigen Wert zuweißt. von daher habe ich es oben beim onmousedown="start(id)" nicht mit aufgerufen.

Das Problem ist, dass ich nicht weiß inwiefern ich die Mauszeigerposition im Firefox bestimmen kann. In allen anderen Browser funktioniert es ja einwandfrei über "event.clientX/Y" bzw "event.window.clientX/Y". Aber genau das lässt ja der Firefox nicht zu.
Mir ist der Lösungsweg über "e.pageX/Y" bekannt. ich weiß aber nicht, wie ich den implementieren muss in meinen code. so wie ich es versucht habe funktioniert es auf jeden Fall nicht.

(die Verzweigung mache ich später über php)

[ChrisB]

Hi,

Und welche?

Wonach fragst du da jetzt genau?

Nach den "Schwierigkeiten", die du erwähnst, aber nicht benennst.

Abgesehen davon, dass ich die beiden Eigenschaften in deinem Code nicht sehe - hast du denn auch ein "e" übergeben?

Welche beiden?

Die von dir erwähnten:

habe mich dann für die Variante "e.pageX/Y" entschieden.

Im Netz hatte ich gelesen, dass der Browser "e" automatisch den richtigen Wert zuweißt.

Nein, das tut er nicht.
Was er tut, ist das event-Objekt als ersten Parameter an die Funktion, die beim Event aufgerufen wird, zu übergeben.
http://de.selfhtml.org/javascript/objekte/event.htm#allgemeines

Das Problem ist, dass ich nicht weiß inwiefern ich die Mauszeigerposition im Firefox bestimmen kann. In allen anderen Browser funktioniert es ja einwandfrei über "event.clientX/Y" bzw "event.window.clientX/Y". Aber genau das lässt ja der Firefox nicht zu.

Doch, tut er - in der Beschreibung zu clientX/clientY ist das Mozilla-Icon mit aufgeführt.

MfG ChrisB

[Nick]

Doch, tut er - in der Beschreibung zu clientX/clientY ist das Mozilla-Icon mit aufgeführt.

Da ging es mir nicht ums clientX, sondern ums window.event. Das benutzen ja anscheinen alle Browser, außer der Firefox, um direkt auf das richtige Objekt zuzugreifen.

Ich bin nur verwirrt, was das Übertragen des Wertes für das Event-Objekt zu tun hat, weil bei den Beispiel niemals sowas dabei steht:

document.onkeydown = TasteGedrueckt;

Und im nächsten wird dann einfach
function TasteGedrueckt (Ereignis) {
aufgerufen.
Da steht dann plötzlich das "Ereignis" drin.

Wie muss es denn in meinem Aufruf eingebunden werden, sodass das richtige Event-Objekt übertragen wird?
Das muss doch dann hier eingetragen werden:
<div id="1" onmousedown="start('1')">

[ChrisB]

Hi,

Ich bin nur verwirrt, was das Übertragen des Wertes für das Event-Objekt zu tun hat, weil bei den Beispiel niemals sowas dabei steht:

document.onkeydown = TasteGedrueckt;

Da kann auch nicht "dabei stehen", weil dort nur die Funktionsreferenz an den Handler zugewiesen wird.

Und im nächsten wird dann einfach
function TasteGedrueckt (Ereignis) {
aufgerufen.
Da steht dann plötzlich das "Ereignis" drin.

Das steht da nicht "plötzlich", sondern ganz normal.

Die Funktion ist so deklariert, dass der erste Parameter, der beim Aufruf übergeben wird, innerhalb der Funktion unter dem Namen Ereignis ansprechbar ist.

Das muss doch dann hier eingetragen werden:
<div id="1" onmousedown="start('1')">

Du solltest zusehen, dass du die Definition der Eventhandler ganz aus dem HTML herauslässt, und stattdessen so wie beim obigen Beispiel machst.

MfG ChrisB

[Nick]

Du solltest zusehen, dass du die Definition der Eventhandler ganz aus dem HTML herauslässt, und stattdessen so wie beim obigen Beispiel machst.

Das hat mit dem Aufbau der Seite an sich zu tun. Es werden später über php und eine Datenbank mehrere Elemente erzeugt, die dann über Javascript freibewegbar sein sollen. Da halt an der Stelle im Code die divs generiert werden, wäre es natürlich praktisch das dann ebenfalls dort das mouseoverdown steht, um die nötigen Referenzen richtig abzugeben.
Gibt es keine möglichkeit dort das richtige event-Objekt zu übertragen?

Alternativ: wenn es besser ist im Script selbst das onmousedown zu setzen, wie werden dann die divs angesprochen? ich weiß jetzt nicht wie ich das richtig ausdrücken soll.
im moment wird ja über "document.getElementById(id)..." die style eigenschaften verändert. kann das dann ebenfall über das event-objekt gemacht werden, oder wie?
Also das es dann praktisch so aussieht:

move = function(ereignis) {  
		ereignis.style.top = ereignis.clientY - mausY

[ChrisB]

Hi,

Du solltest zusehen, dass du die Definition der Eventhandler ganz aus dem HTML herauslässt, und stattdessen so wie beim obigen Beispiel machst.

Das hat mit dem Aufbau der Seite an sich zu tun. Es werden später über php und eine Datenbank mehrere Elemente erzeugt, die dann über Javascript freibewegbar sein sollen. Da halt an der Stelle im Code die divs generiert werden, wäre es natürlich praktisch das dann ebenfalls dort das mouseoverdown steht, um die nötigen Referenzen richtig abzugeben.

Nein, praktisch ist immer die Trennung von Struktur, Darstellung und Logik.

Lasse nach dem Laden des Dokuments ein JavaScript ausführen, dass den in Frage kommenden Elementen dynamisch Eventhandler zuweist.

http://molily.de/js/einbindung.html#ereignisbasierung

MfG ChrisB

[EKKi]

Mahlzeit Nick,

Ich bin nur verwirrt, was das Übertragen des Wertes für das Event-Objekt zu tun hat, weil bei den Beispiel niemals sowas dabei steht:

document.onkeydown = TasteGedrueckt;

Das bedeutet, dass die Funktion "TasteGedrueckt" aufgerufen wird, wenn der entsprechende Event ausgelöst wird. Bei vernünftigen Browsern wird dann automatisch das auslösende event-Objekt als erster Parameter mit übergeben.

Und im nächsten wird dann einfach
function TasteGedrueckt (Ereignis) {
aufgerufen.

Aufgerufen wird da nichts. Da wird die Funktion deklariert. Und diese Funktion erwartet also genau einen Parameter. Beim Aufruf der Funktion ist dieser in vernünftigen Browsern - oh Wunder! - mit dem auslösenden event-Objekt gefüllt.

Sollte das nicht der Fall sein (z.B. wenn kein vernünftiger Browser verwendet wird), wird hiermit ...

if (!Ereignis)  
  Ereignis = window.event;

... nachträglich das globale Objekt window.event in den lokalen Funktionsparameter "Ereignis" kopiert. Anschließend steht in jedem Fall in "Ereignis" das auslösende event-Objekt. So weit klar?

Das muss doch dann hier eingetragen werden:
<div id="1" onmousedown="start('1')">

Warum übergibst Du überhaupt einen Parameter? Offenbar handelt es sich dabei immer um die ID des jeweiligen <div>-Elements (<http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=dass IDs generell nicht nur aus Ziffern bestehen dürfen und insbesondere mit einem Buchstaben anfangen müssen>, sei hier mal nur am Rande erwähnt) ... die bekommst Du doch auch innerhalb der Funktion:

Angenommen, in der Variablen "Ereignis" befindet sich (s.o.) das auslösende event-Objekt. Dann bekommst Du hiermit ...

var Element = Ereignis.target || Ereignis.srcElement;

... das Element, das den Event ausgelöst hat (einmal nach standardkonformer und einmal nach MICROS~1'scher Syntax). Wenn Du jetzt dessen ID brauchst, kannst Du sie <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=einfach auslesen> ...

MfG,
EKKi

[Nick]

Warum übergibst Du überhaupt einen Parameter?

Was ist denn daran so schlimm? Bisher hat es gut funktioniert.
Ich weiß. Das blockiert dann wohl anscheinend den automatisch zugewiesenen event-handler.

var Element = Ereignis.target || Ereignis.srcElement;

Gibt das dann den gleichen Wert wie "document.getElementById(id)" aus? Oder direkt die id.
Den Link, den du danach gesetzt hast hat mich verwirrt.

Wenn ich also diesen einen Parameter (die id von dem div) weg lasse, dann überträgt der den event-objekt richtig? Dann kann ich einfaüch über "Ereignis" die richtigen Daten abrufen?

[ChrisB]

Hi,

var Element = Ereignis.target || Ereignis.srcElement;

Gibt das dann den gleichen Wert wie "document.getElementById(id)" aus?

Das kommt auf den Inhalt von id an.

Es gibt die Referenz auf das Element zurück, dass Ziel des Events ist.

Den Link, den du danach gesetzt hast hat mich verwirrt.

Lerne jetzt bitte endlich mal, zu beschreiben, *was* für ein Problem du hast (auch wenn es ums Verständnis geht) - anstatt immer nur zu konstatieren, dass du eins hast.

MfG ChrisB

[EKKi]

Mahlzeit Nick,

Warum übergibst Du überhaupt einen Parameter?

Was ist denn daran so schlimm? Bisher hat es gut funktioniert.

Bisher wolltest Du anscheinend auch nicht auf das event-Objekt zugreifen.

Ich weiß. Das blockiert dann wohl anscheinend den automatisch zugewiesenen event-handler.

Richtig.

var Element = Ereignis.target || Ereignis.srcElement;

Gibt das dann den gleichen Wert wie "document.getElementById(id)" aus? Oder direkt die id.

Es gibt eine Referenz auf das Elementobjekt zurück, das den Event ausgelöst hat. Die Methode getElementById() gibt auch ein Elementobjekt zurück. Schau es (und seine Eigenschaften) Dir doch einfach mal an (z.B. indem Du entsprechend Debug-Ausgaben machst).

Den Link, den du danach gesetzt hast hat mich verwirrt.

Welchen Link? Den zu dem Kapitel in SELFHTML, wo beschrieben ist, wie man die Universaleigenschaften eines beliebigen Objekts in Javascript ausliest? Was verwirrt Dich daran?

Wenn ich also diesen einen Parameter (die id von dem div) weg lasse, dann überträgt der den event-objekt richtig?

Wenn Du es richtig machst, funktioniert es richtig.

Dann kann ich einfaüch über "Ereignis" die richtigen Daten abrufen?

Du kannst auf alle Eigenschaften des in der Variablen "Ereignis" gespeicherten event-Objekts zugreifen, das ist richtig. Eine dieser Eigenschaften ist eine Referenz auf das Elementobjekt, das den Event ausgelöst hat. Das wiederum hat natürlich auch Eigenschaften - z.B. seine ID (wenn sie denn korrekt gesetzt wurde).

MfG,
EKKi

[Nick]

Bisher wolltest Du anscheinend auch nicht auf das event-Objekt zugreifen.

War ja auch nicht von Nöten. Nur der Firefox macht mir so Probleme. Ich versteh ich auch nicht, was der für ein Problem mit window.event hat :-/

Wenn Du es richtig machst, funktioniert es richtig.

Jaa, wenn ich es doch endlich mal richtig einbinden würde. Habe bisher noch nicht mit event-handler und event-objekten hantieren müssen, bei den paar Scripts die ich geschrieben habe.

Ist es denn so richtig eingebaut?

<div id="d1" onmousedown="start()"></div>  
<script type="text/javascript"> 

~~~javascript

function start(Ereignis) {
if (!Ereignis) {
Ereignis = window.event
}
var Element = Ereignis.target || Ereignis.srcElement;
mausX = Ereignis.clientX - document.Element.offsetLeft
mausY = Ereignis.clientY - document.Element.offsetTop
document.Element.style.zIndex = 2
document.Element.onmousemove =  move
document.Element.onmouseup =  stop
}
function move(Ereignis) {
if (!Ereignis) {
Ereignis = window.event
}
var Element = Ereignis.target || Ereignis.srcElement;
document.Element.style.top = Ereignis.clientY - mausY
document.Element.style.left = Ereignis.clientX - mausX
}
function stop(Ereignis) {
if (!Ereignis) {
Ereignis = window.event
}
var Element = Ereignis.target || Ereignis.srcElement;
document.Element.style.zIndex = 1
document.Element.onmousemove = null
document.Element.onmouseup = null
}

`</script>`{:.language-html}  
  
 

[ChrisB]

Hi,

Nur der Firefox macht mir so Probleme. Ich versteh ich auch nicht, was der für ein Problem mit window.event hat :-/

Er hat keins.
Der IE hat das Problem, dass er keine lokale Kopie des event-Objektes für den jeweligen Event erstellt, sondern meint, alle Events über *ein* globales Objekt window.event bedienen zu müssen.

MfG ChrisB

[Nick]

Hi,

Nur der Firefox macht mir so Probleme. Ich versteh ich auch nicht, was der für ein Problem mit window.event hat :-/

Er hat keins.
Der IE hat das Problem, dass er keine lokale Kopie des event-Objektes für den jeweligen Event erstellt, sondern meint, alle Events über *ein* globales Objekt window.event bedienen zu müssen.

MfG ChrisB

Danke ... das hat mir jetzt geholfen. Ich hab es jetzt wirklich, ganz ehrlich und ohne jeden Sarkasmus vollkommen verstanden!
Danke Chris!

Und zu deinem "erklär das Problem richtig"
Mein Problem ist: ES FUNZT NICHT
Da ich nicht weiß, wie es richtig umgesetzt wird in Javascript, kann ich nicht wirklich mehr dazu sagen als das. Deswegen frage ich ja auch hier.
Aber du kannst auch keine durchgängig konstruktive Hilfe leisten, sondern nur winzigst kleine Bruchstücke liefern. "Benutz doch einen Event-Hanlder" Ja ... versuche ich dann, mache ich aber nicht richtig, und dann krieg ich nur ein "Du machst es falsch" zu hören, finde ich ganz hilfreich. Jetzt wirklich.
"Dann lerne es" wird jetzt von dir bestimmt kommen.
Versuche ich gerade, verstehst du? Und ich habe mir gedacht, dass es verständlicher werden würde, fragte ich jemanden, der Ahnung von der Sache hat. Aber nein, da stößt man nur auf eine Wand, die einen mit Ziegelsteinen bewirft auf denen kleine Post-Its dran kleben mit Minimalanweisungen drauf geschrieben.
(Ist im übrigen nicht gegen EKKi gerichtet. Da waren die Aussagen wenigstens halb nachvollziehbar.)

[Der Martin]

Hallo,

Und zu deinem "erklär das Problem richtig"
Mein Problem ist: ES FUNZT NICHT

nein, das ist allenfalls deine Art, über die tatsächlichen Symptome des Problems hinwegzusehen. Eine Beschreibung oder Erklärung eines Problems enthält dagegen *Informationen*.

Wenn etwa ich ein Etikett von einem Möbelstück ablösen will und einem potentiellen Helfer erkläre, "das geht nicht", dann hilft das dem Helfer nicht im Geringsten. Erwähne ich aber, dass das Etikett einreißt, dass große Mengen Kleber zurückbleiben, oder dass ich das Furnier dabei mit abreiße, dann hat der Helfer eine Vorstellung der Situation.

Da ich nicht weiß, wie es richtig umgesetzt wird in Javascript, kann ich nicht wirklich mehr dazu sagen als das.

Doch, sicher. Du kannst zumindest beschreiben, was du eigentlich genau willst, und was du von den einzelnen Schritten erwartest, die du versuchst. Dazu gehört dann aber auch noch die Beobachtung, was tatsächlich passiert.

"Dann lerne es" wird jetzt von dir bestimmt kommen.

Ja: Lerne, systematisch vorzugehen und Situationen zu beschreiben!

Und ich habe mir gedacht, dass es verständlicher werden würde, fragte ich jemanden, der Ahnung von der Sache hat.

Ja, möglich. Aber dieser Jemand braucht ein Minimum an Wissen über dein Problem, das du erst liefern musst.

Aber nein, da stößt man nur auf eine Wand, die einen mit Ziegelsteinen bewirft auf denen kleine Post-Its dran kleben mit Minimalanweisungen drauf geschrieben.

Was erwartest du? Dass dir jemand deinen Code fix und fertig schreibt? Wir sind hier in einem Forum, dessen vorrangiges Ziel die Hilfe zur Selbsthilfe ist. Also präsentieren wir nicht die Lösung auf dem Silbertablett, sondern geben dem Fragenden die nötigen Hilfestellungen, mit denen er sich diese Lösung selbst erarbeiten kann.

So long,
 Martin

[Nick]

ich schreibe als Titel: Mauszeigerposition im Firefox
und weiter: funktioniert nicht über window.event, wie macht man es sonst?

als antwort kommt: benutze die richtigen event-handler

ich frage zurück: wie muss das aussehen? ist das so richtig (mit meinem code)

als antwort kommt: nein das ist falsch

ich frage wieder: wie muss es denn aussehen?

als antwort kommt: guck dir das hier an (ein bespiel was auf meinen gezeigten Code nicht angewendet werden kann)

ich frage: das versteh ich nicht ganz. kann man das und das benutzen um es so  zu  machen?

als antwort: ja, wenn du es richtig machst

also meiner Meinung nach war es ziemlich klar, was mein Problem ist. aber als Antwort kam nur lauter nichtsnutzegem Zeugs.
"Wenn man es richtig macht funktionert es auch" ? JA ACH NE, also das hätte ich ja nie ahnen können! ! !

Aber trotzdem danke.

wie schon gesagt, hatte ich es letztens schon einmal hier probiert, da auch ausführlicher das Problem geschildert.
Wirklich geholfen wurde mir da aber auch nicht.

Ich finde es ja nett, dass ihr euch Zeit nehmt anderen zu helfen. Aber wenn ihr dann auch antwortet, solltet ihr euch auch wirklich dafür interessieren, anstatt einfach nur Wirrwarr zu schreiben ohne dabei auf den Code des fragenden einzugehen.
Wenn einem da einfach IRGENDWAS anderes gezeigt wird, hilft das nicht wirklich weiter.

[EKKi]

Mahlzeit Nick,

Wenn einem da einfach IRGENDWAS anderes gezeigt wird, hilft das nicht wirklich weiter.

Wenn dem Fragenden ganz offensichtlich grundlegende Kenntnisse der verwendeten Technologien fehlen, dann ist es hier üblich, ihn genau darauf hinzuweisen (ggf. mit einem oder mehreren Links oder Verweisen, wo er diese Kenntnisse erlangen kann).

Wenn der Fragende darüber hinaus keine vernünftige Fehler- bzw Problembeschreibung liefert, sondern eigentlich immer nur "funzt net" (bzw. ein gleichermaßen sinnvolles und hilfreiches Äquivalent) artikuliert, dann kann dieser Fragende nicht ernsthaft mit etwas anderem als genau diesen Hinweisen auf allgemeine Informationen sowie wildem Herumraten rechnen.

MfG,
EKKi

[Nick]

Ich habe mehrere Male Beispiele gebracht wie ich es verwenden würde, oder näher nachgefragt, wie genau denn der Rat umzusetzen sei.

Inwiefern kommt das einem einfachen "funzt net" gleich?

Das Problem wurde beschrieben: die Mauszeigerposition wird nicht erkannt.
Wenn dann ein Lösungsvorschlag kam, den ich nicht verstanden habe, habe ich versucht ihn dennoch umzusetzen, wenn es mir nicht gelang, habe ich danach gefragt, wie es denn richtig umzusetzen sei. Und das ging immer weiter so.
Und dann wird mir auf einmal von irgendeinem Kerl doch tatsächlich als Antwort gegeben "es funktioniert, wenn du es richtig machst".

Ich bitte euch, wenn man da nicht ein wenig verwundert sein darf über die Qualität der Hilfe!
Wenn ich es denn nicht richtig mache, kann man mir denn nicht einfach Lösungsvorschläge geben, die auf meinen Code zugeschnitten sind?
Ich hatte sogar ausdrücklich danach gefragt, ob nicht der Event-Handler mit übergeben werden kann, während man andere Variablen mit überträgt, und dies alles in dem Tag des Elementes selbst gestartet wird.

Was hab ich da als Antwort bekommen "mach es nicht so" .... das hilft mir aber nicht, ich wollte nämlich wissen ob es geht, und wenn ja, wie!

Was soll ich denn mehr an dem Problem beschreiben als: "ich will die Mauszeigerposition auch in Firefox bekommen. Der hier dargestellte Code lässt dies nur in den anderen Browser zu. Wie kann es für den Firefox umgebaut werden, sodass aber weiter die Form des Codes vorhanden bleibt?"
Was ist denn DARAN bitteschön nur ein "funzt net" ? ? ? ?
Inwiefern soll ich das denn noch aufblähen mit Informationen, die euch dabei helfen mir zu helfen?
Und wenn ich dann ein umgebautes Script zeigte, wurde mir nur gesagt, dass es falsch sei. Na dankeschön!

Wenn ihr doch die Probleme lösen könnt, sofern man alles in kleinste Detail beschreibt, dann will ich das mal hier sehen:

<div id="c" onmousedown="start(event)"><br>x: <input value="x" id="ixc"><br><br>y: <input value="y" id="iyc"></div>  
<script type="text/javascript"> 

~~~javascript

start = function(event) {
if (!event) event = window.event;
var Element = event.target.id || event.srcElement.id
mausX = event.clientX - document.getElementById(Element).offsetLeft
mausY = event.clientY - document.getElementById(Element).offsetTop
document.getElementById(Element).style.zIndex = 2
document.getElementById(Element).onmousemove =  function() { move(event) }
document.getElementById(Element).onmouseup =  function() { stop() }
}
move = function(event) {
var Element = event.target.id || event.srcElement.id
document.getElementById(Element).style.top = event.clientY - mausY
document.getElementById(Element).style.left = event.clientX - mausX
document.getElementById("ix"+Element).value = event.clientX - mausX
document.getElementById("iy"+Element).value = event.clientY - mausY
}
stop = function() {
var Element = event.target.id || event.srcElement.id
document.getElementById(Element).style.zIndex = 1
document.getElementById(Element).onmousemove = null
document.getElementById(Element).onmouseup = null
}

`</script>`{:.language-html}  
  
Wie man sehen kann, wird über das onmousedown die Funktion "start" aufgerufen. Ich habe es mit dem Event-Handler probiert, es funktioniert auch in allen Browsern. Die Weiche habe ich ebenfalls eingebaut "if (!event) event = window.event;" jedoch scheint mein IE nichts damit anfangen zu können, die Input-Bereiche, die ja die Position des Divs in Pixel anzeigen soll verändert sich nicht. Ansonsten würde ja in "event.ClientX/Y" etwas richtiges ankommen, und somit das Value des Inputs verändert werden.  
Problem an der Stelle ist also: das IE will den Event-Handler nicht richtig erkennen, bzw diesen nicht durch "window.event" ersetzen, damit es im IE dann doch funktioniert.  
  
Im weiteren Verlauf wird die ID des Elementes in Element geschrieben (für die korrekte Zuweisung des richtigen Divs). Dann die momentane Mauszeigerposition zum Zeitpunkt des Mausklicks gespeichert, damit später wenn das Feld bewegt wird, der Mauszeiger in Relation zum Feld an der selben stelle stehen bleibt.  
Dann wird der z-Index geändert, damit das zu bewegende Element ganz oben steht (damit keine Probleme mit eigentlich darüberliegenden Elementen aufkommt).  
Und dann soll halt die Funktion "move" aufgerufen werden, sobald die Maus bei gedrückter Taste bewegt wird.  
In der Funktion werden halt die unterschiedlichen styles je nach Mauszeigerposition verändert. Ist ja selbsterklärend was da vorgeht in dem Script. Nicht das Komplexeste.  
Problem, welches jetzt aber aufkommt ist, dass sich das Feld nicht bewegt.  
Eigentlich läuft ja die Funktion "move" solange ab, wie ich die Maus gedrückt halte. Aber obwohl ich die Maus bewege, verändert sich die Position nicht. Ich bin mir aber nicht sicher woran genau das liegen könnte. (Deswegen frage ich ja auch hier -.-)  
Das Value des Inputs kommt richtig aus, also funktioniert ja "document.getElementById("ix"+Element).value = event.clientX - mausX" dieser Teil. Aber wenn die Maus bewegt wird, verändert sich anscheinend das "event.clientX" nicht, oder etwas stimmt mit dem onmousemove nicht, bzw mit dem onmousedown, da ja zumindest einmal das alles durchlaufen wird, ansonsten würde ja das Input nicht die korrekte Position des Divs anzeigen.  
  
  
War das jetzt genug Problembeschreibung? Weil wenn nicht, verstehe ich euch echt nicht. Wie tief soll man denn ein Problem beschreiben? Soll man sein Script bis ins kleinste Detail beschreiben, oder wie?! Ich dachte sowas wäre, zumindest bei dem einfachen Zeugs was ich da geschrieben habe, sofort erkenntlich!  
  
Ich habe jetzt meiner Meinung nach sehr genau und eindeutig, die Funktion und das Problem erklärt.  
Könnt ihr mir JETZT helfen?

[ChrisB]

Hi,

Wenn ihr doch die Probleme lösen könnt, sofern man alles in kleinste Detail beschreibt, dann will ich das mal hier sehen:

"Ja, pack sie bei ihrem Ehrgeiz - dann werden sie nicht mehr anders können, als dir endlich das zu liefern, was du haben willst!"

Nice try, but - dream on.

Du wurdest darauf hingewiesen, dass du zum Auffinden von Fehlern in deinem Code die JavaScript-Fehlerkonsole deines Browsers nutzen sollst - vorzugsweise die des FF, deren Meldungen sind jedenfalls weitaus besser als die der des IE. (Das gilt immer, so lange es nicht um Browser-spezifische Probleme geht.)

stop = function() {
var Element = event.target.id || event.srcElement.id

Sie wird dir bezüglich dieser Zeile melden, dass event nicht definiert ist.

move = function(event) {
   //...
   document.getElementById("ix"+Element).value = event.clientX - mausX

Und bei dieser irgendwann folgendes,
document.getElementById("ix" + Element) is null

Die Weiche habe ich ebenfalls eingebaut "if (!event) event = window.event;" jedoch scheint mein IE nichts damit anfangen zu können, die Input-Bereiche, die ja die Position des Divs in Pixel anzeigen soll verändert sich nicht.

Du ziehst falsche Schlüsse.

Die Weiche ist im IE in diesem Falle überflüssig, da du event (und damit, auf Grund der Auflösung der Scope Chain, window.event) bereits beim Aufruf der Funktion aus dem HTML heraus als Parameter übergeben hast. Der Parameter event ist also in der Funktion bereits belegt, if (!event) trifft daher nicht zu.

Warum in deinen Input-Feldern dann aber kein Wert erscheint, liegt (zunächst einmal) daran, dass du im IE mit dem nachfolgenden Code einen Fehler verursachst. (*Hier* ist jetzt ein Blick in die Fehlerkonsole des *IE* fällig.)

var Element = event.target.id || event.srcElement.id
Hier machst du den zweiten Schritt vor dem ersten.
Der IE kennt event.target nicht - also liefert dieser Ausdruck lediglich null. Nachfolgend versuchst du auf eine Eigenschaft namens id dieses Objektes zuzugreifen - was einen Laufzeitfehler verursacht, denn null hat keine Eigenschaften.

Ansonsten würde ja in "event.ClientX/Y" etwas richtiges ankommen, und somit das Value des Inputs verändert werden.

Das wäre möglich - aber du lässt dem IE keine Chance dazu, weil er gar nicht mal zu diesen Stellen kommt; die Abarbeitung des Codes wurde auf Grund des vorher aufgetretenen Fehlers abgebrochen.

Problem an der Stelle ist also: das IE will den Event-Handler nicht richtig erkennen, bzw diesen nicht durch "window.event" ersetzen, damit es im IE dann doch funktioniert.

Nein, das ist nicht das Problem.
Wie ich schon schrieb, ziehst du hier *falsche* Schlüsse.

Und das ist genau der Grund, warum wir "funktioniert nicht" als Problembeschreibung nicht akzeptieren - weil "funktioniert nicht" zwar letztendlich das "Ergebnis" des ganzen sein mag, man aber die einzelnen Schritte nacheinander betrachten *muss*, wenn man herausfinden will, *warum* es nicht funktioniert.

Und wir wollen, dass *du* lernst, sowas herauszufinden. Und deshalb geben wir dir Stück für Stück Hinweise - damit du einen Schritt nach dem anderen machen kannst.

Im weiteren Verlauf wird die ID des Elementes in Element geschrieben (für die korrekte Zuweisung des richtigen Divs).
Dann [...]

Nein, nichts "dann", weil der "weitere Verlauf" an der Stelle, wo du einen Fehler beim Versuch der Ermittlung der ID machst, abgebrochen wurde.

Auf den weiteren Code gehe ich jetzt nicht ein - schliesslich haben wir ein konkretes Problem identifiziert, und das muss jetzt als allererstes behoben werden. Danach können wir ggf. weiter sehen.

Problem, welches jetzt aber aufkommt ist, dass sich das Feld nicht bewegt.

Siehst du? Schon wieder betrachtest du nur das "Endergebnis" - das sich aber nicht einstellen will, weil vorher bereits Fehler aufgetreten sind.
*Genau* *das* ist die "funzt nich"-Sichtweise. Und wir wollen dir dabei helfen, sie dir abzugewöhnen - weil sich solche Probleme nur beheben lassen, wenn man sie Schritt für Schritt angeht, und dabei an den *richtigen* Stellen die *richtigen* Schlüsse zieht.

Eigentlich läuft ja die Funktion "move" solange ab, wie ich die Maus gedrückt halte. Aber obwohl ich die Maus bewege, verändert sich die Position nicht. Ich bin mir aber nicht sicher woran genau das liegen könnte. (Deswegen frage ich ja auch hier -.-)

Einen entscheidenden Hinweis dazu hast du inziwschen schon von Andreas bekommen - du setzt *ungültige* Werte für die CSS-Eigenschaften.
Und selbst wenn du gültige Werte setzen würdest, müssten diese wirkungslos bleiben, weil die Elemente, für die du sie setzt, von ihrer Formatierung her nicht die Voraussetzung mitbringen, dass diese wirksam sein dürften.
Jetzt wirst du vermutlich wieder meckern wollen, dass dies nur ein Post-It auf einem Ziegelstein ist, statt einer konkreten Aussage - ja, genau :-) Weil ich möchte, dass du dich selbst informierst, wann diese Eigenschaften eine Wirkung zeigen dürfen. Wenn deine CSS-Kenntnisse noch zu gering sind, um das ohne Nachlesen zu wissen - dann sind wir nämlich schon wieder beim "den zweiten Schritt vor dem ersten machen".

Das Value des Inputs kommt richtig aus, also funktioniert ja "document.getElementById("ix"+Element).value = event.clientX - mausX" dieser Teil.

Der funktioniert bei mir im Firefox nur genau ein mal (und auch nur dann, wenn ich direkt in die Inputfelder klicke).
Das liegt am weiter oben erwähnten Fehler,

document.getElementById("ix" + Element) is null

War das jetzt genug Problembeschreibung?

Schon besser.
Aber noch zu wenig, was die Ergebnisse *deiner* Fehlersuche angeht; und noch zu wenig logisches Denken und methodisches Vorgehen, was das ziehen der *richtigen* Schlüsse angeht.

Weil wenn nicht, verstehe ich euch echt nicht. Wie tief soll man denn ein Problem beschreiben? Soll man sein Script bis ins kleinste Detail beschreiben, oder wie?!

Man sollte es vor allem in seinen Details untersuchen - und der Blick in die Fehlerkonsole ist der allererste Schritt dahin. Denn dort stehende Meldungen einfach zu ignorieren, und sich dann zu wundern, warum das ganze nicht wie gewünscht "funktioniert" - das ist *keine* Fehler*suche*.

Ich dachte sowas wäre, zumindest bei dem einfachen Zeugs was ich da geschrieben habe, sofort erkenntlich!

So "einfach" ist es nicht.
Und wie sich der Scriptverlauf im Detail verhält, vermag der Mitleser auch nicht unbedingt vorherzusagen - *deshalb* schaut man in die Fehlerkonsole, um nachzuvollziehen, *was* *wann* *wo* schief geht.

Ich habe jetzt meiner Meinung nach sehr genau und eindeutig, die Funktion und das Problem erklärt.

Und ich habe dir m.E. jetzt sehr detailiert erklärt, wie man schrittweise bei der Fehlersuche vorgeht; und wie man sich einem Problem logisch und methodisch nähert, anstatt nur das "Ergebnis" "funzt nich" zu betrachten, weil das in keinster Weise weiterhilft.

Könnt ihr mir JETZT helfen?

Bist du JETZT bereit, Hilfe anzunehmen - oder wirst du wieder nur meckern, weil ich nicht sofort die fertige Lösung auf dem Silbertablet präsentiert habe, sondern dir zu zeigen versuche, welche Schritte bei der Fehlersuche zum Erfolg führen?
Falls letzteres, dann steig' ich hiermit aus.

MfG ChrisB

[EKKi]

Mahlzeit Nick,

Ich habe mehrere Male Beispiele gebracht wie ich es verwenden würde, oder näher nachgefragt, wie genau denn der Rat umzusetzen sei.

Inwiefern kommt das einem einfachen "funzt net" gleich?

Ganz einfach: "funzt net" ist keine Problembeschreibung. Genauso wenig ist das einfache Kopieren und Einfügen von Code eine Problem-*BESCHREIBUNG*. Keiner der hier anwesenden Leser kann wissen, *was genau* bei Dir passiert - wenn Du das nicht beschreibst. In dem Code kann man höchstens fehlerhafte Anweisungen erkennen oder evtl. erraten, wo ein Fehler auftreten *könnte* ... man kann aber nicht wissen, was Du bezweckst.

Das Problem wurde beschrieben: die Mauszeigerposition wird nicht erkannt.

Das ist Dein gefühltes Problem, richtig. Letztendlich ist das aber vermutlich nur die Auswirkung irgendeines Fehlers, der im Verlauf Deines Programmcodes passiert. Und solange Du nicht in der Lage bist, diesen vernünftig zu überprüfen, wird sich daran auch nichts ändern.

Und dann wird mir auf einmal von irgendeinem Kerl doch tatsächlich als Antwort gegeben "es funktioniert, wenn du es richtig machst".

Danke für den "irgendeinen Kerl". Die Aussage ist aber korrekt. Und insbesondere habe ich sie genau so formuliert, da Dein Code zu dem Zeitpunkt vor Fehlern nur so strotzte.

Offenbar fehlt Dir wirklich ganz erhebliches Grundlagenwissen. Dieses musst Du Dir *selbst* aneignen - Links dazu wurden genannt. Es ist absolut nicht sinnvoll, ohne ein entsprechendes Grundverständnis einfach irgendwelchen (Beispiel-)Code aus verschiedenen Quellen miteinander zu kombinieren und dann zu hoffen, dass er schon irgendwie wie gewünscht funktionieren wird. Mir ist kein Browser bekannt, der über eine Javascript-Engine mit Brain-Interface verfügt - Du musst also schon richtigen und fehlerfreien Code schreiben, damit der Browser weiß, was er machen soll.

Wenn ich es denn nicht richtig mache, kann man mir denn nicht einfach Lösungsvorschläge geben, die auf meinen Code zugeschnitten sind?

Wie sollte man das tun, wenn die Ursache des Fehlers überhaupt noch nicht klar ist? AFAIK habe ich Dich auf verschiedene Dinge hingewiesen, die Ursache des Fehlers sein *könnten*. Da Du aber kein vernünftiges Debugging betreibst (bzw. Du uns über entsprechende Ergebnisse und Erkenntnisse im Unklaren lässt), ist es müßig, darüber zu spekulieren, wo genau der Fehler denn nun liegen *könnte*.

Ich hatte sogar ausdrücklich danach gefragt, ob nicht der Event-Handler mit übergeben werden kann, während man andere Variablen mit überträgt, und dies alles in dem Tag des Elementes selbst gestartet wird.

Jein. Bei ersterem handelt es sich um ein Event-Objekt, aber man kann selbstverständlich zusätzlich zu diesem weitere Variablen mit übergeben. Das Event-Objekt muss dabei allerdings *IMMER* der erste Parameter sein.

Was soll ich denn mehr an dem Problem beschreiben als: "ich will die Mauszeigerposition auch in Firefox bekommen. Der hier dargestellte Code lässt dies nur in den anderen Browser zu. Wie kann es für den Firefox umgebaut werden, sodass aber weiter die Form des Codes vorhanden bleibt?"

Das ist aber nicht das Problem. Das Problem ist, dass Dein Code, so wie er bisher war/ist, schlicht und ergreifend fehlerhaft ist. Zuerst solltest Du deshalb alle diese Fehler beheben. Dabei ist eine zielführende, vernünftige Fehlersuche das allererste Mittel der Wahl. Erst wenn der Code an sich absolut fehlerfrei ist, dann ist es sinnvoll, irgendwelche Sonderlocken für irgendwelche Browser einzubauen.

Was ist denn DARAN bitteschön nur ein "funzt net" ? ? ? ?

Ganz einfach: es fehlt eine hilfreiche und detaillierte Problembeschreibung. Du beschreibst nur die Auswirkung. Auf die Fehlersuche hast Du Dich bisher jedoch offenbar noch nicht gemacht - stattdessen erwartest Du von Deinen Lesern, dass sie hellsehen und alle Fehler, die Dein Code *bei Dir* verursachen könnte, im Voraus erkennen.

Und wenn ich dann ein umgebautes Script zeigte, wurde mir nur gesagt, dass es falsch sei. Na dankeschön!

Fang doch endlich mal an, vorhandene Fehler zu identifizieren und zu beheben, anstatt einfach nur verschiedene Code-Fragmente auszuprobieren und unkontrolliert daran herumzuändern (ohne zu wissen, was Du eigentlich tust).

Wenn ihr doch die Probleme lösen könnt, sofern man alles in kleinste Detail beschreibt, dann will ich das mal hier sehen:

Das ist keine Problembeschreibung, das ist der (immer noch fehlerhafte) Code. Was genau ist Dein Problem, dass Du das Wort "Problembeschreibung" offenbar nicht verstehst?

  var Element = event.target.id || event.srcElement.id  

Es ist - abgesehen von den von ChrisB beschriebenen Problemen dieser Zeile - IMHO *immer* sinnvoller, sich das den Event auslösende Element in einer Variablen zu merken ... und nicht nur seine ID. Dann hast Du nämlich immer alle seine Eigenschaft zur Hand, und musst nicht ständig mit getElementById() herumhühnern. Schreibe also lieber (wie von mir vorgeschlagen):

var Element = event.target || event.srcElement;

  mausX = event.clientX - document.getElementById(Element).offsetLeft  

Dann kannst Du hier nämlich viel einfacher auf die gewünschte Eigenschaft zugreifen:

mausX = event.clientX - Element.offsetLeft;  
Element.style.zIndex = 2;  
Element.onmousemove = function() { move(event) };  

  document.getElementById(Element).style.top = event.clientY - mausY  

Wie bereits von MudGuard erwähnt, ist diese Anweisung fehlerhaft, da die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=top eine korrekte <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=numerische Angabe> erwartet. Eine einfache Zahl ist jedoch *keine*.

Warum ignorierst Du eigentlich die Dir gegeben Hinweise so penetrant?

Problem, welches jetzt aber aufkommt ist, dass sich das Feld nicht bewegt.

Du hast in den vorherigen Zeilen sehr schön heruntergebetet, was der Code machen sollte. Das ist absolut unnötig, da Deine Leser das genauso gut erkennen können wie Du. Viel wichtiger ist, *ob* der Code das auch *tatsächlich* macht! Das kannst aber *nur DU* sagen - und zwar, indem Du jetzt endlich mal anfängst, sinnvolles Debugging zu betreiben! Das *kann* Dir keiner abnehmen. Überprüfe also, ob Deine Code-Zeilen auch das tun, was sie sollen ... und zwar, indem Du Dir *NACH JEDER EINZELNEN VERDAMMTEN ANWEISUNG* mit geeigneten Mitteln (die ich Dir genannt habe) ausgeben lässt, ob die Anweisung erfolgreich abgeschlosen wurde. Zusätzlich solltest Du *ENDLICH MAL DIE FEHLERKONSOLE BEACHTEN*!

Wie tief soll man denn ein Problem beschreiben?

So tief es geht. Du kratzt immer noch an der Oberfläche. Ganz einfach, weil Du nicht zwischen "Problem" und "Fehler" sowie "Auswirkung" und "Ursache" unterscheiden kannst oder willst.

Soll man sein Script bis ins kleinste Detail beschreiben, oder wie?! Ich dachte sowas wäre, zumindest bei dem einfachen Zeugs was ich da geschrieben habe, sofort erkenntlich!

Du sollst nicht Dein Skript beschreiben (weil das, wie Du ja selbst erkannt hast, nicht sooo komplex ist und eigentlich selbsterklärend sein sollte), sondern Du sollst Dein Problem beschreiben. Dazu solltest Du alle erreichbaren Möglichkeiten nutzen - insbesondere die Fehlerkonsole eines vernünftigen Browsers nicht ignorieren und die drei goldenen Schritte der Fehlerursachenforschung betreiben: Kontrollausgaben, Kontrollausgaben und Kontrollausgaben.

Könnt ihr mir JETZT helfen?

Das tun wir die ganze Zeit - nur willst Du unsere Hilfe bisher offenbar nicht annehmen ...

MfG,
EKKi

[Nick]

Habe jetzt so alles eingebaut. Auch den Grund dahinter verstanden, was du und Chris mir gesagt habt.
Naja, das es schwachsinnig ist in der Variable nur die ID des Elementes einzuschreiben ist an der Stelle eigentlich egal, ich brauche ja nur diese eine Information, aber da der Ie ja anscheinend rumzickt hab ich es weggelassen und direkt das ganze Element eingeschrieben.

Und zum Fehler beschreiben und Fehlerkonsole benutzen:
ich habe hier nachgefragt, weil ich halt eben diese Fehler nicht finden kann. Könnte ich, müsste ich hier nicht nachfragen und ich würde mir meine eigenen Lösungen dazu suchen. Ihr fordert immer das alle Fehler direkt aufgezählt werden müssen, ohne darauf zu achten, dass mal einer der hier fragt eben nicht alle Fehler findet und genau aus diesem Grund hierhin kommt.

Ich bin aber auch kein dämliches A****loch und nehme halt sehr wohl euren Rat an! (den von MudGuard hab ich aber übersehen, aber da ich dutzende mal mit dem Script immer mal wieder bei dem einen oder anderen Browser die Elemente zum bewegen brachte OHNE dass da +"px" hinter stand, ist es mein gutes Recht erkennen zu dürfen, dass es wohl doch NICHT ganz so wichtig ist!!)
Naja, ich habe die Fehlerkonsole geöffnet, das Script reingeschoben, und was kommt raus? nur eine simple "Mitteilung" was die Funktion "stop" angeht. Mehr nicht.
Also kann ich jetzt etwa davon ausgehen, dass da keine Fehler mehr auftauchen, oder wie oder was? Denn eigentlich scheint da immer noch ein Fehler zu sein, was es halt "nicht funzt". Den Fehler kann ich nicht ausmachen. Die Pixel habe ich im übrigen aber dennoch zur Sicherheit hinten drangehangen. Das bewirkt aber auch keinen Unterschied.

Ich gehe mal davon aus, dass man einfach das Script nehmen muss, es in die Zeile bei der Fehlerkonsole kopiert und dann auf "Evaluieren" klicken soll?
Auf jeden Fall gibt der mir keinen Fehler aus.

[EKKi]

Mahlzeit Nick,

Und zum Fehler beschreiben und Fehlerkonsole benutzen:
ich habe hier nachgefragt, weil ich halt eben diese Fehler nicht finden kann.

Das ist ja auch richtig. Allerdings kannst Du nicht erwarten, dass mit derartig dürfigen Informationen "gefütterte" Leser direkt sofort wissen, wo genau ein Fehler auftritt.

Wenn Du dann mehrfach darauf hingewiesen wirst, doch das zu nennen, was in der Fehlerkonsole steht - das aber nicht tust ... wenn Du dann mehrfach darauf hingewiesen wirst, dass bestimmte einzelne Code-Zeilen so nicht funktionieren *können* und Dir direkt Hinweise gegeben werden, wie Du den Code verbessern kannst - das aber nicht tust (sondern stattdessen im nächsten Posting mit komplett umgekrempeltem Code ankommst) ... wenn Du dann mehrfach darauf hingewiesen wirst, doch bitte mal den Inhalt einzelner Variablen mittels geeigneter Mittel (z.B. alert() oder throw()) zu *überprüfen*, um Wunsch und Wirklichkeit in Übereinstimmung zu bringen - Du darauf aber *überhaupt nicht* reagierst (bzw. zumindest nichts derartiges erkennen lässt) ... dann kannst Du nicht erwarten, dass man Dir helfen kann. Und irgendwann verliert auch der Letzte die Lust, Dir helfen zu *wollen*.

Ihr fordert immer das alle Fehler direkt aufgezählt werden müssen, ohne darauf zu achten, dass mal einer der hier fragt eben nicht alle Fehler findet und genau aus diesem Grund hierhin kommt.

Das fordern wir mitnichten! Wir fordern, dass jemand, der sich an das Forum wendet, die Tipps für Fragende durchliest und beherzigt. Das beinhaltet, dass der Fragende *ALLE* zur Verfügung stehenden Informationen liefert (und dazu gehören - oft erst nach Rückfragen - auch die Meldungen der Fehlerkonsole). Wenn der Fragende dann darauf hingewiesen wird, dass an bestimmten Stellen im Code irgendwas eigentlich gar nicht funktionieren *kann*, dann sollte der Fragende *selbständig* *überprüfen*, ob denn auch alles so funktioniert, wie er sich das vorstellt (Thema: Kontrollausgaben, Kontrollausgaben, Kontrollausgaben). Jemand anders *kann* das nämlich nicht tun.

Ich bin aber auch kein dämliches A****loch und nehme halt sehr wohl euren Rat an!

Ersteres hat keiner behauptet und letzteres beginnt man langsam zu sehen ... während der ersten paar Postings hatte ich allerdings nicht den Eindruck. Vielleicht bemerkst Du langsam, wie wichtig gezieltes Feedback an die Antwortenden ist?

Frager:    "Funzt net!"

Antworter: "In Zeile soundso kann es auch nicht funktionieren, weil ..."

Frage:     "Hast recht, ich habe das überprüft, da steht ja auch ein vollkommen falscher Wert in der Variablen, nämlich xy."

Und schon weiß der Antwortende, dass Du seinen Hinweis ernstgenommen und überprüft hast. Du hast bisher aber immer nur veränderten Code gezeigt (warum Du ihn verändert hast und warum Du ihn genau so verändert hast, hast Du jeweils nicht geschrieben) und wieder von vorne angefangen: "Funzt net!"

Wie soll man Dir da bei der Fehleranalyse vernünftig helfen können?

Ich gehe mal davon aus, dass man einfach das Script nehmen muss, es in die Zeile bei der Fehlerkonsole kopiert und dann auf "Evaluieren" klicken soll?

Ähm, nein. Öffne die betreffende Seite, öffne die Fehlerkonsole, drücke auf "Löschen". Wenn dann keine Meldungen mehr drinstehen, führe die Aktion aus, die "net funzt". Wenn währenddessen irgendwo ein Fehler auftritt, sollte dieser jetzt in der Konsole angezeigt werden.

MfG,
EKKi

[Nick]

Ersteres hat keiner behauptet

So meinte ich das nicht. Ich wollte damit sagen, dass ich nicht möchte, dass man diesen Eindruck von mir hier bekommt.

Jeder Code den ich aber wieder hier zurückgeschrieben habe war ein Resultat meines Versuches eure Hinweise und Hilfestellungen in meinen Code einzuarbeiten. Ich habe das immer so gut es nach meinem Wissenstand ging getan, als es dann nicht funktionierte, war mir natürlich klar, dass ich es falsch umgesetzt hatte. Aus diesem Grund zeigte ich diesen veränderten Code hier, um von euch zu erfahren, was denn dann da falsch umgesetzt worden ist.
Und ihr habt mir dann ja immer wieder auch Hinweise gegeben, wie etwas richtig eingebunden werden sollte, was gemacht werden muss.
Aber irgendwann kam dann öfters die Antwort "wenn du es richtig machst, dann funktioniert es auch". Da ist es mit mir durchgegangen, denn jetzt mal ganz ehrlich, und da musst du mir auch zustimmen, genauso wenig wie meine mangelnde Fehleranalyse euch hilft, hilft mir so ein Kommentar!

Für mich gab es am Anfang dieses Diskussion hier keine umfassendere Fehlerbeschreibung als "funzt net", weil mir was das anging die Hände gebunden waren. Ich konnte keinen Fehler erkennen. Deswegen kam ich ja zu euch.

Wenn ich demnächst ein Problem haben sollte werde ich ausführlicher die Hintergründe beschreiben und sofort die Fehlerkonsole mit einbeziehen.

[MudGuard]

Hi,

den von MudGuard hab ich aber übersehen, aber da ich dutzende mal mit dem Script immer mal wieder bei dem einen oder anderen Browser die Elemente zum bewegen brachte OHNE dass da +"px" hinter stand, ist es mein gutes Recht erkennen zu dürfen, dass es wohl doch NICHT ganz so wichtig ist!!

Das läßt auf einen weiteren schweren Fehler schließen: Deine Seite wird im Quirksmodus dargestellt. Das solltest Du beheben.

cu,
Andreas

[Struppi]

mausX = event.clientX - Element.offsetLeft;

Element.style.zIndex = 2;
Element.onmousemove = function() { move(event) };

  
Das ist aber Unsinn. So wird beim mousemove immer das gleiche Eventobjekt übergeben, das beim Aufruf der Funktion erzeugt wurde.  
  
So macht's Sinn:  
`Element.onmousemove = function(e) { move(e); };`{:.language-javascript}  
  
Struppi.

[Nick]

Das ist aber Unsinn. So wird beim mousemove immer das gleiche Eventobjekt übergeben, das beim Aufruf der Funktion erzeugt wurde.

Also so, als ob immer wieder das selbe Element, an der einen Stelle bewegt werden soll?

Der Ie macht dann ja wieder macken, aber ich hab schon gesehen, das liegt dann daran, dass in jeder neuen Instanz der event-handler (oder das event-objekt?) nicht definiert ist.

Okay, danke.
Aber ich hab das noch nicht ganz verstanden.
Element.onmousemove = function(e) { move(e); };
Das sorgt also dafür das "e" immer wieder neu betrachtet wird, sodass die veränderte Position genommen wird, und nicht die zu Anfang des Scripts bestimmte?

[Struppi]

Der Ie macht dann ja wieder macken, aber ich hab schon gesehen, das liegt dann daran, dass in jeder neuen Instanz der event-handler (oder das event-objekt?) nicht definiert ist.

Ja, wie die hier veruscht wurde zu erklären, der IE benutzt immer ein globales Event Objekt, andere Browser übergeben eines beim auftreten des Events.

Aber ich hab das noch nicht ganz verstanden.
Element.onmousemove = function(e) { move(e); };
Das sorgt also dafür das "e" immer wieder neu betrachtet wird, ...

Das ist das Eventobjekt, das andere Browser ausser dem IE bei einem aufruf des Events übergeben.

Besser wäre es, wenn du hier noch das event Objekt des IEs integrierst:

Element.onmousemove = function(e) { move(e || window.event); };

Die oder-Abfrage sorgt dann dafür, dass in der Funktion auf jeden Fall ein Eventobjekt ankommt. Entweder das automatisch erzeugte oder das globale.

Struppi.

[Nick]

Besser wäre es, wenn du hier noch das event Objekt des IEs integrierst:

Element.onmousemove = function(e) { move(e || window.event); };

Die oder-Abfrage sorgt dann dafür, dass in der Funktion auf jeden Fall ein Eventobjekt ankommt. Entweder das automatisch erzeugte oder das globale.

Ja, das habe ich jetzt über die Abfrage if(!e) etc... in der Funktion selbst gelöst. Wie man es dann letztendlich macht ist ja dann auch egal.

»»»» Aber ich hab das noch nicht ganz verstanden.
»»»» Element.onmousemove = function(e) { move(e); };
»»»» Das sorgt also dafür das "e" immer wieder neu betrachtet wird, ...
»»
»»Das ist das Eventobjekt, das andere Browser ausser dem IE bei einem aufruf »»des Events übergeben.

Ja, aber ich habe noch nicht ganz nachvollziehen können, warum das an der Stelle quasi zweimal übergeben werden muss. Einmal steht es ja in "function(e)" und dann nochmal in "move(e)".

[EKKi]

Mahlzeit Nick,

Ja, aber ich habe noch nicht ganz nachvollziehen können, warum das an der Stelle quasi zweimal übergeben werden muss.

Muss es nicht. Du verwechselst wieder etwas:

Einmal steht es ja in "function(e)"

Das ist die Deklaration der Funktion. In dieser wird angegeben, dass die Funktion einen Parameter erwartet (wie der heißt, spielt keine Rolle). Vernünftige Browser übergeben da das auslösende Event-Objekt als ersten Parameter, also befindet sich dieses dann in der Variablen "e".

und dann nochmal in "move(e)".

Das ist der Aufruf der Funktion move() innerhalb der oben deklarierten Funktion. Du musst natürlich das vom Browser übergebene Event-Objekt (das sich - wir erinnern uns - in der Variablen "e" befindet) an die Funktion move() weitergeben ... nun, genau das passiert hier: Du übergibst die Variable "e" an die Funktion move(). Innerhalb von move() steht dann wiederum in deren erstem Parameter das Event-Objekt zur Verfügung.

MfG,
EKKi

[Nick]

Achso. Das ist also nur eine Beschreibung dafür wie die Funktion "aussieht".

Aber warum muss das an der Stelle unbedingt gemacht werden?
Die Frage kommt jetzt daher, da das Aufrufen der Funktion "stop" auch ohne die  weitere Deklaration funktioniert.
(Ich hab es jetzt weiter mit "event" laufen, da aus irgendeinem Grund, wenn ich es mit "e" austausche, das Script nicht mehr will. Das nur nebenbei, damit ihr euch nicht wundert, dass ich da noch immer event stehen habe!)

start = function(event) {  
Element.onmouseup =  function() { stop(event) };  
}  
  
stop = function(event) {...}

So läuft es, obwohl die Deklaration nicht weiter ausgebaut ist, also: function(event) { stop(event) }
An der Stelle muss da nicht "event" stehen?

[Struppi]

(Ich hab es jetzt weiter mit "event" laufen, da aus irgendeinem Grund, wenn ich es mit "e" austausche, das Script nicht mehr will. Das nur nebenbei, damit ihr euch nicht wundert, dass ich da noch immer event stehen habe!)

Das ist kritisch, da dann der Parameter genauso heißt wie das Objekt des IEs. Das etwas nicth funktioniert liegt eher an einem Fehler in deinem Code - aber wie gesagt mit "es funzt nicht" kann dir keiner helfen.

[code lang=javascript]start = function(event) {
Element.onmouseup =  function() { stop(event) };
}

Deine Stopfunktion im ursprünglichen Code braucht kein Eventobjekt, sondern die ID als Parameter, das kann also nicht funktioieren.

Struppi.

[Nick]

Das ist kritisch, da dann der Parameter genauso heißt wie das Objekt des IEs.

ist es unbedingt nötig, dass der Parameter einen anderen Namen hat? oder nur im Zusammenspiel mit einem anderen Script.
Es funktioniert jetzt so für mich, und wie der gute, alte Spruch heißt "never change a working system".

[Struppi]

Das ist kritisch, da dann der Parameter genauso heißt wie das Objekt des IEs.

ist es unbedingt nötig, dass der Parameter einen anderen Namen hat? oder nur im Zusammenspiel mit einem anderen Script.

Ja, da - ich wiederhole mich - event sich überschneidet mit dem window.event Objekt des IE. Ich würde also auf jeden Fall den Parameter umbenennen. Zumal, wenn was nicht funktioniert hat, es darauf hindeutet, dass noch mehr falsch ist.

Es funktioniert jetzt so für mich, und wie der gute, alte Spruch heißt "never change a working system".

Davon würde ich in deinem Fall nicht ausgehen.

Struppi.

[Nick]

So sieht es bei mir jetzt aus:

<div id="c" onmousedown="start(e)"><br>x: <input value="x" id="ixc"><br><br>y: <input value="y" id="iyc"></div>  
<script type="text/javascript"> 

~~~javascript

start = function(e) {
var Element = e.target || e.srcElement;
mausX = e.clientX - Element.offsetLeft;
mausY = e.clientY - Element.offsetTop;
Element.style.zIndex = 2;
Element.onmousemove =  function(e) { move(e || window.event) };
Element.onmouseup =  function() { stop(e) };
};
move = function(e) {
var Element = e.target || e.srcElement;
Element.style.top = e.clientY - mausY + "px";
Element.style.left = e.clientX - mausX + "px";
document.getElementById("ix"+Element.id).value = e.clientX - mausX;
document.getElementById("iy"+Element.id).value = e.clientY - mausY;
};
stop = function(e) {
var Element = e.target || e.srcElement;
Element.style.zIndex = 1;
Element.onmousemove = null;
Element.onmouseup = null;
};

`</script>`{:.language-html}  
  
Wenn ich alle Bezeichnungen "event" ersetze durch "e", dann kommt bei mir die Fehlermeldung "e" sei nicht definiert.  
  
Ich hab auch schon über `onmousedown="start()"`{:.language-javascript} und `onmousedown="start"`{:.language-javascript} versucht die Funktion aufzurufen, aber dann startet der diese nicht (habe über `alert(Element)`{:.language-javascript} versucht Element ausgeben zu lassen, was nicht erscheint, also für mich der Hinweis, dass die Funktion überhaupt gar nicht erst gestartet wird)  
  
Ich habe immer irgendwie Probleme mit dem korrekten Aufrufen von Funktionen.  
Liegt es daran wie ich hier die Funktion umschreibe?  
`start = function(e) {...}`{:.language-javascript}  
müsste das hier dann so heißen?  
`function start(e) {...}`{:.language-javascript}

[Struppi]

So sieht es bei mir jetzt aus:

<div id="c" onmousedown="start(e)"><br>x: <input value="x" id="ixc"><br><br>y: <input value="y" id="iyc"></div>

<script type="text/javascript">

  
Hier übergibst du e das existiert nicht. Das Problem ist der Event im HTML Code, besser wäre es wenn du hier schrieben würdest:  
  
~~~javascript
var el = document.getElementById('c');  
if(el) el.onmousedown = start;

Wenn du unbedingt den Aufruf im HTML Element haben willst, dann musst du das Event objekt übergeben.
<div id="c" onmousedown="start(event)"><br>x: <input value="x" id="ixc">

Dieses event Objekt ist wiederrum in allen Browsern existent.

Ach, und die Funktionen würde ich auch so deklarieren:

function start(e) {....  
}  

Macht zwar keinen grossen Unterschied. aber du müßtest wenn schon die Funktion so deklarieren:
var start = function(e) {...

Struppi.

[Nick]

Okay, danke!

Muss ich mal gucken. Es werden mehrere Container auf der Seite vorkommen. Vom Prinzip kann man das mit getElementById umgehen und direkt alle Divs ansprechen. (Naja, es gibt aber auch verschaltete. Von daher nicht so praktisch.)
Muss ich mal gucken.

Aber soweit hab ich das jetzt alles verstanden.

Danke nochmal.

ciaociao

[Struppi]

Ja, aber ich habe noch nicht ganz nachvollziehen können, warum das an der Stelle quasi zweimal übergeben werden muss. Einmal steht es ja in "function(e)" und dann nochmal in "move(e)".

Das function(e) ist nur ein Funktionkörper, ein closure, das beschreibt, mit welchen Parameter, im Falle des auftreten des Events, die Funktion aufgerufen wird.

Du musst dir das ganze so vorstellen.

1. du definierst eine Funktion
function meineEventFunktion(parameter) {..}

2. du übergibst dem Eventhandler die Funktions_referenz_ - noch mal! nur die Referenz auf die Funktion -

objekt.onhandler = meineEventFunktion; // keine Klammer!

3. Wenn der Event eintritt mach der Browser folgendes:
* eine Eventobjekt erzeugen
* nach schauen ob der Eventhandler eine Funktionsreferenz enthält
* Funktion aufrufen

Das sieht dann intern (schematisch als JS ausgedrückt) so aus:

  
var evt = new Event(....);  
if(typeof this.onhandler == 'function')  
this.onhandler(event)  

Hier wird die Funktion dann endlich aufgerufen, mit dem Eventobjekt als Parameter und dieser wird dann in dem Beispiel an die Funktion move() weitergegeben.

Struppi.

[EKKi]

Mahlzeit Struppi,

So macht's Sinn:
Element.onmousemove = function(e) { move(e); };

Stimmt, hast recht. Verdammte Closures - hab nicht darauf geachtet, weil's mir eigentlich um die Sache mit dem Element ging.

MfG,
EKKi

[EKKi]

Mahlzeit Nick,

Und zu deinem "erklär das Problem richtig"
Mein Problem ist: ES FUNZT NICHT

Das mag sein. Das hilft hier aber *NIEMANDEM*, Dein Problem zu verstehen. Versetze Dich doch bitte mal in die Lage Deiner Leser: wie sollen die wissen, was genau nicht funktioniert bzw. was anders funktioniert als Du es Dir vorstellst - wenn Du beides (das, was passiert - oder auch nicht - und das, was Du möchtest, was passiert) nicht vernünftig beschreibst. In Deinen Schädel kann hier keiner gucken und Glaskugeln sind auch grad aus.

Da ich nicht weiß, wie es richtig umgesetzt wird in Javascript, kann ich nicht wirklich mehr dazu sagen als das. Deswegen frage ich ja auch hier.

Doch, kannst Du. Du kannst einerseits das, was Du willst, vernünftig beschreiben. Ohne technisches Brimbamborium (denn genau das ist ja offenbar Dein Problem), sondern einfach so - mit einfachen Worten.

Andererseits kannst Du endlich anfangen, selbst eine sinnvolle Fehlersuche zu betreiben. Dazu solltest Du Wunsch und Wirklichkeit miteinander vergleichen. Mit anderen Worten: bei jeder Zeile Code, die Du notierst, erwartest Du, dass etwas bestimmtes passiert. Überprüfe doch einfach mal (z.B. mittels http://de.selfhtml.org/javascript/objekte/window.htm#alert@title=alert() oder http://de.selfhtml.org/javascript/beispiele/fehlerbehandlung_try_catch.htm@title=throw() in Kombination mit einer vernünftigen Fehlerkonsole), ob tatsächlich die richtigen Werte berechnet wurden, eine Variable den gewünschten Wert enthält oder ein Objekt überhaupt existiert. So kannst Du vielleicht selbst schon mal auf den einen oder anderen Fehler stoßen - vor allem aber machst Du Deinen Lesern das Raten erheblich leichter, wenn Du ihnen geeignete Hinweise geben kannst.

(Ist im übrigen nicht gegen EKKi gerichtet. Da waren die Aussagen wenigstens halb nachvollziehbar.)

Danke für die Blumen - aber ich habe bisher nur Glück beim Erraten Deines Problems gehabt.

Du willst etwas von Deinen Lesern (die natürlich bereit sind, Dir zu helfen) ... warum machst Du es ihnen dann nicht einfach mal etwas leichter?

MfG,
EKKi

[ChrisB]

Hi,

Und zu deinem "erklär das Problem richtig"
Mein Problem ist: ES FUNZT NICHT

Wenn du zum Arzt gehst, und auf die Frage, was dein Problem ist, wiederholt nur "Aua!" oder "Schmerzen" sagst - dann wird der auch nicht viel für dich tun können.
(Mit vielleicht einer Ausnahme - dir ordentlich Morphium verpassen, in der Hoffnung, dass dann wenigstens das Gejammer aufhört. Diese Vorgehensweise wäre vielleicht auch bei "funzt nich"-Sagern überdenkenswert ...)

Aber du kannst auch keine durchgängig konstruktive Hilfe leisten, sondern nur winzigst kleine Bruchstücke liefern.

Das ist konstruktive Hilfe - sie gibt dir die Chance, dich an Hand von Stichworten immer wieder über etwas mehr an Wissenswertem zu informieren.

Versuche ich gerade, verstehst du? Und ich habe mir gedacht, dass es verständlicher werden würde, fragte ich jemanden, der Ahnung von der Sache hat.

Und ich denke mir, wenn man dir Quellen nennt, wo du etwas über die Grundlagen einer Thematik nachlesen kannst, dann würde das einem mitdenkenden Menschen weiterhelfen -

Aber nein,

• aber (wohl offenbar) Nein.

da stößt man nur auf eine Wand, die einen mit Ziegelsteinen bewirft auf denen kleine Post-Its dran kleben mit Minimalanweisungen drauf geschrieben.

Solide Häuser baut man mit Ziegelsteinen, nicht mit Post-Its.

MfG ChrisB

[EKKi]

Mahlzeit Nick,

Wenn Du es richtig machst, funktioniert es richtig.
Jaa, wenn ich es doch endlich mal richtig einbinden würde.

Das ist eigentlich nicht schwierig - wenn man die grundlegende Funktionsweise verstanden hat. Ich vermute, dass das bei Dir daran noch etwas hapert.

Ist es denn so richtig eingebaut?

Nein.

  var Element = Ereignis.target || Ereignis.srcElement;  

Hier deklarierst Du eine http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=lokale Variable und weist ihr einen Wert zu  ...

  mausX = Ereignis.clientX - document.Element.offsetLeft  

... wie kommst Du direkt anschließend auf die Idee, dass das Objekt "document" ein entsprechendes Unterobjekt besitzt? Greif doch einfach auf die lokale Variable "Element" zu.

Weiterhin ist es sehr ratsam, jede Javascript-Anweisung mit einem Semikolon abzuschließen.

MfG,
EKKi

[EKKi]

Mahlzeit Nick,

Welche beiden? also "event" ist bestimmt da drin. "event.window" hab ich nicht mehr benutzt, weil es bei den Browsern zumindest für mich keinen unterschied zu "event" macht, aber das ist ja auch nicht das problem

Komisch. Also wenn ich ein Browser wäre, bestünde für mich ein immenser Unterschied zwischen "event.window" und "event". Was Du vermutlich meinst, ist "window.event" ...

mit "e" hatte ich es so eingebaut:

Und damit prinzipiell falsch. Das Event-Objekt wird der bei einem Event ausgeführten Funktion als *erster* Parameter übergeben - entweder automagisch oder manuell.

Im Netz hatte ich gelesen, dass der Browser "e" automatisch den richtigen Wert zuweißt.

Wo "im Netz"? Glaube nicht einfach alles, was irgendwo steht. "e" ist auch nur eine (globale) Variable ohne irgendwelche besonderen Eigenarten.

Das Problem ist, dass ich nicht weiß inwiefern ich die Mauszeigerposition im Firefox bestimmen kann.

Bestimme sie einfach anhand eines korrekt übergebenen event-Objekts. Dein Problem scheint zu sein, dass Du den siebenhundertneununddreißigsten Schritt vor dem ersten machen möchtest ...

MfG,
EKKi

[EKKi]

Mahlzeit Nick,

Hi, ich hatte mich schon einmal gemeldet mit dem Thema bewegliche Elemente.

Das ist schön für Dich. Für Deine Leser weniger. Erwartest Du ernsthaft, dass jeder hier alle Postings liest und genau weiß, wer was wann zu welchem Thema (und unter welchem Pseudonym) geschrieben hat? Wieso verlinkst Du den entsprechenden Archivthread nicht einfach? So könnte jeder kurz nachschlagen, auf was Du Dich beziehst.

<div id="1" onmousedown="start('1')"></div>
<script type="text/javascript">
start = function(id) {
mausX = event.clientX - document.getElementById(id).offsetLeft

Lies Dir die <http://de.selfhtml.org/javascript/objekte/event.htm@title=Erläuterung zum ersten Beispiel (Ereignisüberwachung direkt mit JavaScript programmieren)> durch und vergleiche den Code mit Deinem. Korrigiere anschließend Deinen Code.

Es muss ja an dem "event.clientX/Y" liegen, ansonsten bekäme ja der Firefox die nötigen Daten.

Dann nutze doch (wie in o.g. Beispiel sowie den nachfolgenden Code-Beispielen beschrieben) die entsprechenden Eigenschaften.

Hab auch schon herausgefunden, dass event und event.window nicht mit Firefox kompatibel sind, habe mich dann für die Variante "e.pageX/Y" entschieden.
Aber die will auch einfach nicht.

"Will auch einfach nicht" äußert sich wie? Eine vernünftige und hilfreiche Problembeschreibung ist dieses "Funzt net"-Äquivalent übrigens nicht.

MfG,
EKKi

[MudGuard]

Hi,

  document.getElementById(id).style.top = event.clientY - mausY  

Zusätzlich zu allem bereits gesagten:

event.clientY - mausY
diese Differenz ergibt eine Zahl. Eine Zahl ist kein zulässiger Wert für die style-Eigenschaft top - der Wert ist also ungültig und muß ignoriert werden.

  document.getElementById(id).style.left = event.clientX - mausX  

selbiges.

cu,
Andreas