[JavaScript] Fehler aufgrund eines "Verbotszeichen"

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [JavaScript] Fehler aufgrund eines "Verbotszeichen"

    Hallo!

    Hier erst einmal mein Quell-Code, darunter dann die Beschreibung des Fehlers:

    HTML-Code:
    <html>
	<head>
		<title>
			Notes 0.4a
		</title>
		<style type="text/css">
			body {
				background-color: #ccc;
				overflow: auto;
			}
			p {
				margin: 0px;
			}
			div {
				border: 1px solid black;
				background-color: #ffc;
				position: absolute;
				padding: 0px;
			}
		</style>
		<script type="text/javascript">
			//Variablen für Neue Notizen
			var createNote = false;
			var firstMouseMove = false;
			var startLeft = false;
			var startTop = false;
			var activeNote = false;
			var newWidth = false;
			var newHeight = false;
			var i = 1;

			//Variablen für Änderung der Größe
			var resizeNote = false;
			var resizeWidthLeft = false;
			var resizeWidthRight = false;
			var resizeHeightTop = false;
			var resizeHeightButtom = false;
			var offsetX = false;
			var offsetY = false;
			var startWidth = false;
			var startHeight = false;

			//document.onmousedown
			document.onmousedown = function(e) {
				if(!e) {
					e = window.event;
				}
				//Wenn linke Maustaste gedrückt wird!
				if(e.which == 1) {
					//Evtl. Bug-Fix für IE (?)
					if(!e.pageX) {
						e.pageX = e.clientX;
						e.pageY = e.clientY;
					}
					//Wenn nicht auf die Scrollbar gedrückt wird
					if(e.pageX < document.body.scrollWidth) {
						//Wenn auf leere Fläche gedrückt wird
						if(e.target.tagName == "HTML" || e.target.tagName == "BODY") {
							createNote = true;
							startLeft = e.pageX;
							startTop = e.pageY;
							newdiv = document.createElement("div");
							document.body.appendChild(newdiv);
							activeNote = document.body.lastChild;
							activeNote.setAttribute("id", i);
							i++;
							activeNote.style.left = startLeft + "px";
							activeNote.style.top = startTop + "px";
							activeNote.style.width = "0px";
							activeNote.style.height = "0px";
						}
						//Wenn auf vorhandene Notiz gedrückt wird
						if(e.target.tagName == "DIV") {
							startLeft = parseInt(e.target.style.left);
							startTop = parseInt(e.target.style.top);
							startWidth = parseInt(e.target.style.width);
							startHeight = parseInt(e.target.style.height);
							offsetX = e.pageX - startLeft;
							offsetY = e.pageY - startTop;
							if(offsetX < 5) {
								resizeWidthLeft = true;
							}
							if(startWidth-offsetX < 5) {
								resizeWidthRight = true;
							}
							if(offsetY < 5) {
								resizeHeightTop = true;
							}
							if(startHeight-offsetY < 5) {
								resizeHeightButtom = true;
							}
							if(resizeWidthLeft || resizeWidthRight || resizeHeightTop || resizeHeightButtom ) {
								resizeNote = true;
								activeNote = e.target;
							}
						}
					}
				}
			};

			//document.onmousemove
			document.onmousemove = function(e) {
				//Platzhalter: Hier wird die Größe der Notiz gleich bestimmt während dem "Ziehen" mit der Maus
			};

			//document.onmouseup
			document.onmouseup = function(e) {
				if(!e) {
					e = window.event;
				}
				//Mindestgröße 150x75 und Notizen nicht über die Scrollleisten schauen lassen
				if(createNote || resizeNote) {
					if(newWidth < 150 || !newWidth) {
						activeNote.style.width = "150px";
					}
					if(newHeight < 75 || !newHeight) {
						activeNote.style.height = "75px";
					}
					if(parseInt(activeNote.style.left)+parseInt(activeNote.style.width) > window.innerWidth) {
						activeNote.style.left = (window.innerWidth-parseInt(activeNote.style.width)-2) + "px";
					}
					if(parseInt(activeNote.style.top)+parseInt(activeNote.style.height) > window.innerHeight) {
						activeNote.style.top = (window.innerHeight-parseInt(activeNote.style.height)-2) + "px";
					}
				}
				//Alle Werte zurücksetzen
				createNote = false;
				startLeft = false;
				startTop = false;
				activeNote = false;
				newWidth = false;
				newHeight = false;
				resizeNote = false;
				resizeWidthLeft = false;
				resizeWidthRight = false;
				resizeHeightTop = false;
				resizeHeightButtom = false;
				offsetX = false;
				offsetY = false;
				startWidth = false;
				startHeight = false;
			};
		</script>
	</head>
	<body>
	</body>
</html>
    Ich habe zwar die wichtigsten Sachen im Code kommentiert, will aber trotzdem noch einmal die Funktionsweise erklären: Klickt man auf das Dokument, so wird ein neues DIV-Element erstellt und die Variable createNote auf true gesetzt. Bewegt man dann die Maus, wird die Größe des soeben erzeugten DIV-Elements sofort mitgeändert. (Zurzeit existiert diese Funktion noch nicht und wurde mit einem Platzhalter im Skript versehen.) Beim Loslassen der Maustaste wird überprüft, ob die Standardgröße nicht unterschritten wurde und ob das DIV-Element auch nicht den Rand des Dokuments überschreitet. (Sodass das Dokument nicht unendlich wachsen kann.)

    Klickt man auf ein bereits vorhandenes DIV-Element, so wird die Variable resizeNote (sowie resizeWidthLeft, resizeWidthRight, resizeHeightTop und/oder resizeHeightButtom) auf true gesetzt. Bewegt man die Maus, so weiß dann das Skript, was es zu tun hat. (Auch hier steht zurzeit nur ein Platzhalter.) Und beim Loslassen der Maustaste passiert dieselbe Überprüfung wie bei einem neuen DIV-Element.

    Das Problem ist nun Folgendes: Wenn ich die Größe ändern will (also auf die äußeren 5 Pixel des DIV-Elementes klicke), entsteht manchmal ein Fehler. Sobald ich die Maus bewege, wird der Cursor durch ein Verbotszeichen (Kreis mit einem schrägen Strich durch - so wie auf den Verkehrszeichen) ersetzt. Dies hat zur Folge, dass das Skript das Loslassen der Maustaste nicht bemerkt und den Teil von onmousemove weiterhin ausführt. Dadurch wird die Variable resizeNote nicht zurückgesetzt und bei einer Mausbewegung wird die Größe weiterhin geändert, obwohl die Maustaste gar nicht gedrückt ist! (Ich habe das Überprüft, indem ich bei onmousemove ein neues P-Element mit irgendeinem Text in den Body geschrieben habe.)

    Ich weiß nicht, ob der Fehler browserbedingt ist, oder wie man ihn beheben kann. Ich habe schon alle möglichen Analysen gemacht, doch konnte ich den Fehler nicht feststellen. Könnt ihr mir helfen? Falls das Problem wirklich am Browser liegt, habt ihr vielleicht eine Idee, wie man dieses umgehen kann?

    vorerst einmal fürs Lesen.
    bereits im Voraus für eure Antworten.
    Stichworte: -
  • #2
    Hallo,

    ja, das kommt vom Brower und du bekommst das weg, indem du in den Events onmousedown und onmousemove false zurückgibst. Zusätzlich könnte es hilfreich sein, einen onselectstart-Handler hinzuzufügen, der ebenfalls false zurückgibt.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar

    • #3
      Hallo Freundin der Nacht!

      Vielen Dank für deine Hilfe. Nun klappt alles so, wie es soll.

      Kommentar

      Vorherige template Weiter
      Lädt...
      X