Auf Maus reagieren

[keyboarder]

Hallo zusammen,

heute eine Frage zum Thema Maustaste. Es gibt einige Threads zu diesem Thema hier im Forum und auch über Google, aber nichts, was mich wirklich glücklich macht. Deshalb versuche ich es hier mit dieser Frage:

Es geht um eine Intranet-Anwendung, also Antworten wie "JS ist böse und kann man abstellen" oder "Der will seinen Code verstecken" zählen nicht ;-) Als Browser kommen IE und Firefox in Frage.

Ich habe Felder, die teilweise aus vielen Zeilen bestehen, von denen aber nur ein paar angezeigt werden. Mit einem Doppelklick auf eine Zeile wird ein neuer Datensatz in einem weiteren Fenster geöffnet.

Beispiel: Ich habe 100 Datensätze, und der Titel jedes Datensatzes wird in diesem Feld angezeigt. Ein Doppelklick auf einen Titel öffnet den dazugehörenden Datensatz. Das tut auch alles, wie es soll.

Jetzt werden aber von den 100 Datensätzen nur 3 Stück direkt angezeigt, weil das Feld nur 3 Zeilen hoch ist. Natürlich kann man scrollen, aber das ist recht mühsam.

Meine Idee ist jetzt folgende: Ich "rechtsklicke" in das Feld und es vergrößert sich automatisch, so dass deulich mehr Einträge zu sehen sind. Ein weiterer Rechtsklick setzt das Feld wieder auf die Originalgröße zurück.

Mit der linken Taste funktioniert das auch, aber ich schaffe es einfach nicht, das auf die rechte Maustaste zu beschränken.

Also noch einmal in Kurzform: Ich möchte in einem SELECT-Feld direkt einen onClick-Event für Rechtsklicks und einen onDblClick-Event für Linksdoppelklicks ansprechen.

Mein Ansatz sieht so aus:

  
<select id='FeldID' name='FeldName' onDblClick='openDoc(this)' onClick='resizeField(this)'> ... </select>  

Und hier die resize-Funktion:

  
var pickHuge = true;  
var pickOrgPosition;  
var pickOrgTop;  
var pickOrgHeight;  
function resizeField(e) {  
	if (!e)	e = window.event;  
	if ((e.type && e.type != "contextmenu") && (e.button && e.button != 1) && (e.which && e.which != 1)) return;  
  
	if (pickHuge) {  
		pickOrgPosition		= e.style.position;  
		pickOrgTop		= e.style.top;  
		pickOrgHeight		= e.style.height;  
  
		e.style.position	= "absolute";  
		e.style.top		= 10;  
		e.style.height		= 500;  
  
		pickHuge		= false;  
	} else {  
		e.style.position	= pickOrgPosition;  
		e.style.top		= pickOrgTop;  
		e.style.height		= pickOrgHeight;  
		pickHuge		= true;  
	}  
}  

Die Idee ist also, die Funktion sofort zu verlassen, wenn die linke Maustaste gedrückt wurde und auszuführen wenn die rechte Maustaste gedrückt wurde. Die Funkton selbst (also ab "if (pickHuge)") funktionert korrekt, wenn ich das ganze auf die linke Taste beschränke.

Kann mir jemand sagen, was ich tun muss, damit das Ganze so funktioniert wie ich es möchte?

Im Voraus vielen Dank für Eure Hilfe.

Gruß,

Keyboarder

[keyboarder]

Die zweite Funktionszeile war falsch und sollte eigentlich so aussehen:

if (!((e.type && e.type == "contextmenu") || (e.button && e.button != 1) || (e.which && e.which != 1))) return;

Tut aber trotzdem nicht. Vermutlich muss nur diese Zeile angepasst werden.

Gruß,

keyboarder

[Knusperklumpen]

Hi,

ein elementarer Fehler ist, dass du in die Funktion resizeField das Feld übergibst, dort aber einen Event-Handler erwartest. Das funktioniert so nicht bzw. wenn was funktioniert, ist es Zufall.
Du kannst jedoch aus dem onClick heraus nicht gleichzeitig das betreffende Feld und den Event-Handler übergeben, daher würde ich das anders machen und zwar angelehnt an das Beispiel in http://de.selfhtml.org/javascript/objekte/event.htm#button@title=SelfHTML.
Hier steht außerdem auch, dass unterschiedliche Browser mit unterschiedlichen Zahlen für die jeweiligen Button arbeiten, was die Sache erschwert, letztlich aber nicht unmöglich macht.

Folgendermaßen funktioniert es bei mir im Firefox 3.0 und IE 6.0 (was wir hier an der Arbeit aber auch für nen alten Scheiß haben ...)
Der FF reagiert nur auf die rechte Maustaste, der IE auf die rechte und mittlere.

  
var pickHuge = true;  
var pickOrgPosition;  
var pickOrgTop;  
var pickOrgHeight;  
  
// neu hinzugekommene Variable  
var field;  
  
// neu hinzugekommene Funktion  
function setField(f)  
{  
	field = f;  
	f.onmousedown = resizeField;  
}  
  
function resizeField(e)  
{  
        if (!e) e = window.event;  
  
        if ((e.button && e.button != 1))  
	{  
	        if (pickHuge)  
		{  
			pickHuge = false;  
			alert("vergrößern");  
	        }  
	else  
		{  
			pickHuge = true;  
                	alert("verkleinern");  
	        }  
	}  
}  

  
<select id='FeldID' name='FeldName' onDblClick='' onFocus="setField(this)">  

Probier mal ...
mfg
Knusperklumpen

[keyboarder]

Hallo Knusperklumpen (lustiger Name ;-)),

vielen Dank für Deine ausführliche Antwort. Das funktioniert fast genau so, wie ich es mir vorstelle.

Man muss allerdings zweimal in das Feld klicken, bevor es größer wird. Das kann ich dadurch verhindern, wenn ich anstelle von "onmousedown" den "onmouseup"-Event benutze.

Leider erscheint aber immer noch zusätzlich das Kontextmenü. Auch ein "oncontextmenu='return false'" im Body-Tag bringt da anscheinend nichts. Es sollte eigentlich auch nur in diesen Feldern deaktiviert sein. Hast Du dafür auch noch eine Idee?

Übrigens funktioniert das bei mir im IE8 und FF 3.6.6. Ich entwickle mit "Easy Eclipse für PHP" und in dem dort eingebauten Browser (vermutlich ein IE5, aber genau weiß ich es nicht) tut das nicht. Aber das ist egal, der wird eh nicht benutzt und dort funktionieren auch ein paar andere Dinge nicht.

Vielen Dank,

keyboarder

[Der Martin]

Hi,

vielen Dank für Deine ausführliche Antwort. Das funktioniert fast genau so, wie ich es mir vorstelle.
Man muss allerdings zweimal in das Feld klicken, bevor es größer wird. Das kann ich dadurch verhindern, wenn ich anstelle von "onmousedown" den "onmouseup"-Event benutze.

das wird wohl an der logischen Reihenfolge der Events liegen:
   1. mousedown
   2. focus
   3. mouseup
  (4. contextmenu)
Das Focussieren eines Elements ist ja erst eine Folge des Anklickens.

Leider erscheint aber immer noch zusätzlich das Kontextmenü. Auch ein "oncontextmenu='return false'" im Body-Tag bringt da anscheinend nichts.

Warum im body-Element? Wenn schon, dann solltest du das in dem Element notieren, das du auch für deine Events verwendest. Aber davon abgesehen: Warum gibt nicht einfach dein eigener Eventhandler false zurück, wenn er seine Arbeit erledigt hat, und true, wenn er feststellt, dass er nicht gemeint ist? Das wäre für mich der logische Weg.

Übrigens funktioniert das bei mir im IE8 und FF 3.6.6. Ich entwickle mit "Easy Eclipse für PHP" und in dem dort eingebauten Browser (vermutlich ein IE5, aber genau weiß ich es nicht) tut das nicht.

Vermutlich wird das Ding die IE-Version benutzen, die auf dem Rechner installiert ist.

Ciao,
 Martin

[keyboarder]

Hallo Martin,

das habe ich schon gemacht, aber es tut im FF nicht. Im IE ja, im FF zeigt er beim vergrößern, als auch beim verkleinern das Kontextmenü an. Keine Ahnung, woran das liegt.

Hier der Code:

var pickField;  
function focusField(f) {  
        pickField = f;  
        f.onmouseup = resizePicklistField;  
        return false;  
}  
  
var	pickHuge = true;  
var	pickOrgPosition;  
var pickOrgTop;  
var pickOrgHeight;  
function resizePicklistField(e) {  
	if  (!e) e = window.event;  
	if ((e.button && e.button != 1)) {  
		if (pickHuge) {  
			pickOrgPosition				= pickField.style.position;  
			pickOrgTop					= pickField.style.top;  
			pickOrgHeight				= pickField.style.height;  
  
			pickField.style.position	= "absolute";  
			pickField.style.top			= 10;  
			pickField.style.height		= 500;  
  
			pickHuge					= false;  
		} else {  
			pickField.style.position	= pickOrgPosition;  
			pickField.style.top			= pickOrgTop;  
			pickField.style.height		= pickOrgHeight;  
			pickHuge					= true;  
		}  
		return false;  
	}  
}  

Übrigens, die Eclipse benutzt nicht den installierten IE, denn das ist der IE8. Das scheint noch ein alter zu sein. Aber wie gesagt, das ist nicht wichtig.

Gruß,

keyboarder

[keyboarder]

Hi,

ok, kombiniert gehts in beiden Browsern. Also ein "oncontextmenu='return false'" im <select ...> und 'return false' in den Eventhandlern.

Vielleicht erlebe ich ja noch, dass irgendwann mal alle Browser das Gleiche machen, aber ich habe wenig Hoffnung... ;-)

Vielen Dank für Eure Hilfe.

Gruß,

keyboarder

[EKKi]

Mahlzeit keyboarder,

nur mal so als Anregung bzw. Denkanstoß:

Als Browser kommen IE und Firefox in Frage.

In welchen Versionen? Das ist teilweise ziemlich erheblich ...

Ich habe Felder, die teilweise aus vielen Zeilen bestehen, von denen aber nur ein paar angezeigt werden.

Was verstehst Du in diesem Zusammenhang unter "Felder"?

Mit einem Doppelklick auf eine Zeile wird ein neuer Datensatz in einem weiteren Fenster geöffnet.

Hm ... also <textarea>? Oder mehrzeilige <select>s?

Jetzt werden aber von den 100 Datensätzen nur 3 Stück direkt angezeigt, weil das Feld nur 3 Zeilen hoch ist. Natürlich kann man scrollen, aber das ist recht mühsam.

Aha ... das klingt nach einem von beiden der oben genannten.

Meine Idee ist jetzt folgende: Ich "rechtsklicke" in das Feld und es vergrößert sich automatisch, so dass deulich mehr Einträge zu sehen sind. Ein weiterer Rechtsklick setzt das Feld wieder auf die Originalgröße zurück.

Mit der linken Taste funktioniert das auch, aber ich schaffe es einfach nicht, das auf die rechte Maustaste zu beschränken.

Je nachdem, um welche Browser in welchen Versionen es geht, könnte für Dich vielleicht auch der Event-Handler "oncontextmenu" interessant sein.

MfG,
EKKi

[Struppi]

Und hier die resize-Funktion:

Und noch eine Anmerkung: Dein Code erzeugt Fehler, d.h. du hättest schon Anhand der Fehlermeldungen Wissen können woran dein Ansatz scheitert.

Du weißt wo du die JS Fehlermeldungen imn Browser findest? Wenn nicht würde ich mich schnell schlau machen ohne dies Wissen ist es ungleich schwerer JS sinnvoll zu entwickeln und zu debuggen.

Struppi.