shiftKey + onClick auf Element kombinieren

Mik3e

Erfahrenes Mitglied
Hi Zusammen!

Habe ein Element, bei dem onClick eine Aktion ausgeführt wird.
Nun möchte ich, dass neben dieser Funktion, im Fall das gleichzeitig mit dem Click die SHIFT Taste gedrückt ist, eine andere funktion ausgeführt wird.

Hat jemand eine Ahnung, wie ich diese zwei Eventhandler kombinieren kann?
Das hat mir leider nicht sonderlich geholfen:
http://de.selfhtml.org/javascript/objekte/event.htm#alt_ctrl_shift_key

Danke & LG
Mike
 
Habe einfach mal paar Sachen aus Selfhtml kombiniert:

Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--

* {font:italic 14pt/16pt Arial;color:#000;}

a {
text-decoration:none;
}

a:active{
text-decoration:overline;
background-color:red;
}

a:focus{
background-color:green;
}
-->
</style>
</head>
<title>Test</title>
<script type="text/javascript">
<!--
// Deine Funktion, die ausgeführt werden soll, wenn man draufklickt.
function buttonZeigen()
{
...
}

function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.button) {
    if (Ereignis.button == 1 && Ereignis.shiftKey) {
      // Funktion ausführen, wenn Shift-Taste + Linke Maustaste gedrückt wurde
    } else {
      returnValue=false;
    }
  }
}

document.onmousedown = Tastendruck;
//-->
</script>
</head>
<body>
<a onclick="buttonZeigen()">Button zeigen</a>
</body>
</html>

Wir haben beispielsweise eine Hauptfunktion, die ausgeführt werden soll, wenn man normal mit links draufklickt (Buttonanzeigen()). Wenn man die Shift-Taste hält und auf den Link klickt, wird stattdessen eine zweite Funktion ausgeführt.
 
Hi!

Danke, geniale Sache..
Hier nochmals als kompletter Code zu Testen, sollte das mal jemand brauchen:
PHP:
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--

* {font:italic 14pt/16pt Arial;color:#000;}

a {
text-decoration:none;
}

a:active{
text-decoration:overline;
background-color:red;
}

a:focus{
background-color:green;
}
-->
</style>
</head>
<title>Test</title>
<script type="text/javascript">
<!--
// Deine Funktion, die ausgeführt werden soll, wenn man draufklickt.
function buttonZeigen()
{
	alert('NUR CLICK');
}

function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.button) {
    if (Ereignis.button == 1 && Ereignis.shiftKey) {
      alert('CLICK MIT SHIFT');
    } else {
      returnValue=false;
    }
  }
}

document.onmousedown = Tastendruck;
//-->
</script>
</head>
<body>
<a onclick="buttonZeigen()">Button zeigen</a>
</body>
</html>

Danke nochmals & LG,
Mike
 
Moment, ein Problem gibts noch..
Ich muss ihm beim Click mit Shift Taste noch ein paar Parameter übergeben, die ich dann in der Funktion brauche...

Der Aufruf meiner onClick Funktion sieht folgendermaßen aus:
onClick="setobject(this,'1');"

Wie Du siehst werden hier zwei Parameter mitgeliefert.
Wie könnnte ich die in meine Funktion bekommen

LG
Mike
 
function Tastendruck (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.button) {
if (Ereignis.button == 1 && Ereignis.shiftKey) {
FUNKTIONSNAME(PARAMETER1,PARAMETER2);
} else {
returnValue=false;
}
}
}

So denke ich.

Gibt aber noch ein Problem. Mir ist eben aufgefallen, dass das nur für IE so klappt. Man kann es aber auch für Opera, Firefox und Netscape hinbekommen. @Sven Mintel: Hast du da eine Idee?
Ansonsten müsste ich mich mal darum kümmern. Aber das dauert definitiv länger, weil ich in der Materie auch nicht drin bin. Aber interessant wär's auf jeden Fall, mal zu sehen, wie man das für die anderen Browser strickt. :)
 
Ist kein Problem mit dem IE, da es sich um einen Formulardesigner handelt, der sowieso nur mit IE funktioniert (weil der als einziger Objekte rotieren kann).
Werde das mal versuchen, LG
Mike
 
Hm.. kann mir nicht vorstellen, dass das so spielt..
Denn an die Funktion "Tastendruck" wird der Parameter ja niemals übergeben.
Also diese Variante funktioniert mal definitiv nicht:
PHP:
<script type="text/javascript">
<!--
function funcNurClick(elementparameter)
{
	alert('NUR CLICK');
	alert(elementparameter.id);
}

function funcClickUndShift(elementparameter)
{
	alert('CLICK MIT SHIFT');
	alert(elementparameter.id);
}


function Tastendruck (Ereignis) { 
	if (!Ereignis) {
		Ereignis = window.event; 
	}
	if (Ereignis.button) { 
		if (Ereignis.button == 1 && Ereignis.shiftKey) {
			alert('CLICK MIT SHIFT');
			funcClickUndShift(elementparameter);
		} else { 
			returnValue=false; 
		} 
	} 
} 

document.onmousedown = Tastendruck();
//-->
</script>
Meine Idee wäre eigentlich gewesen, in der Funktion "funcNurClick" eine Abfrage einzubauen, ob gerade die Shifttaste gedrückt ist... Allerdings wüßte ich nicht wie...

LG
Mike
 
Was für eine Funktion willst du denn aufrufen? Und welche Parameter soll sie haben?
 
Hi!

Im Endeffekt beschreibt es dieser Sourcecode sehr gut.
Es gibt verschiedene Elemente, die die Funktion aufrufen können.
Und je nachdem ob er mit gedrückter Shift-Taste oder Ohne auf den Link klickt, soll etwas anderes passieren. Ich brauche aber bei beiden die Objektinstanz (die beim Link mit this() übergeben wird):

PHP:
<html>
<head>
<title>Test</title>
</head>
<title>Test</title>
<script type="text/javascript">
<!--
function funcNurClick(elementparameter)
{
	// SOLL AUSGEBEN "NUR CLICK" UND DIE ID DES ANGEKLICKTEN ELEMENTS
	alert('NUR CLICK');
	alert(elementparameter.id);
}

function funcClickUndShift(elementparameter)
{
	// SOLL AUSGEBEN "CLICKT MIT SHIFT" UND DIE ID DES ANGEKLICKTEN ELEMENTS
	alert('CLICK MIT SHIFT');
	alert(elementparameter.id);
}


function Tastendruck(Ereignis) { 
	if (!Ereignis) {
		Ereignis = window.event; 
	}
	if (Ereignis.button) { 
		if (Ereignis.button == 1 && Ereignis.shiftKey) {
			funcClickUndShift(elementparameter);
		} else { 
			returnValue=false; 
		} 
	} 
} 

document.onmousedown = Tastendruck();
//-->
</script>
</head>
<body>
<a href="#" onclick="funcNurClick(this)" id="1">Aufruf 1</a>
<a href="#" onclick="funcNurClick(this)" id="2">Aufruf 2</a>
<a href="#" onclick="funcNurClick(this)" id="3">Aufruf 3</a>
</body>
</html>
 
du brauchst das nicht per "this" übergeben, im Event-Objekt ist das auslösende Element auch so verfügbar:

IE:Ereignis.srcElement
andere:Ereignis.target
 

Neue Beiträge

Zurück