nicht angemeldet
Problem mit Buttonverhalten
0 0 
Struppi
Problem mit Buttonverhalten
Hallo
Ich benutzte verschiedene Images um ein Buttonverhalten zu imitieren. Der Code dazu schaut bei mir wie folgt aus:
if (document.images)
{
toc1over = new Image(31,54);
toc1over.src = "b go focus.bmp";
toc1down= new Image(31,54);
toc1down.src= "b go down.bmp";
}
function rollPress(imName,down) {
if (down) { document.images[imName].src = toc1down.src }
else { document.images[imName].src = toc1over.src }
}
<img src="b go focus.bmp" class="setact_button" name="toc1"
onMouseDown = "rollPress('toc1',true)"
onMouseOut = "rollPress('toc1',false)"
onMouseUp = "rollPress('toc1',false)"
onclick="javascript:alert('test');">
Funktioniert soweit eigentlich ganz nett, bis auf eine "Kleinigkeit". Fahre ich ueber den Button, drueck ich die Maustaste und halte diese fest. Wie gewuenscht wird dann das onMouseDown event ausgeloest. Halte ich die Maustaste weiterhin gedrueckt und bewege mich aus dem Bereich des Buttons hinaus wird leider NICHT das onMouseOut event aufgerufen! Wie kann ich es nun bewerkstelligen dass mir das onMouseOut Event ebenfalls aufgerufen wird wenn der Benutzer die Maustaste gedrueckt haelt und sich aus dem Buttonbereich bewegt?
Gruss
Christoph
-
Hallo,
das Problem ist, daß Du, wenn Du auf ein Bild klickst, die Maustaste gedrückt hältst und dann die Maus bewegst, den DRAG-Event aktivierst, d.h. Du ziehst das Bild.
Und dieser DRAG-Event wird solange gefeuert, bis Du die Maustaste losläßt, und solange gibt es keinen MOUSEOUT-Event (da Du ja nach der drag-Logik mit der Maus das Bild festhältst und ziehst).
Ergo: Du mußt den DRAG-Event unterdrücken.Habe Dir mal eine kleine Seite zum Testen gebaut. Dort klappt alles so, wie Du es möchtest (beachte das ondrag="return false;"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function showEventType(eventObj) {
var outputObj = document.getElementById("output");
outputObj.innerHTML = 'event: '+eventObj.type;
}
</script><style type="text/css">
#test { height:100px; width:300px; background-color:lime; margin-top:40px; }
#output { height:40px; width:300px; background-color:#efefef; border:1px solid #333; margin-top:40px; }
</style>
</head><body>
<img src="testbild.gif" onmousedown="showEventType(event);" onmouseout="showEventType(event);" onmouseup="showEventType(event);" onclick='showEventType(event);'" ondrag="return false;" />
<div id="test" onmousedown="showEventType(event);" onmouseout="showEventType(event);" onmouseup="showEventType(event);" onclick='showEventType(event);'">Testelement</div>
<div id="output"></div></body>
</html>Ciao,
Andreas-
Ergo: Du mußt den DRAG-Event unterdrücken.
Habe Dir mal eine kleine Seite zum Testen gebaut. Dort klappt alles so, wie Du es möchtest (beachte das ondrag="return false;"):
Den scheint es aber nur im IE zu geben, weder Firefox noch Opera feuern ein ondrag
Struppi.
-
Hallo,
Den scheint es aber nur im IE zu geben, weder Firefox noch Opera feuern ein ondrag
hast recht.
So klappt es auch im Mozilla:
<img src="testbild.gif" onmousedown="showEventType(event);return false;" onmouseout="showEventType(event);" onmouseup="showEventType(event);" onclick='showEventType(event);'" ondrag="return false;" />Ciao,
Andreas-
Hi
<img src="testbild.gif" onmousedown="showEventType(event);return false;" onmouseout="showEventType(event);" onmouseup="showEventType(event);" onclick='showEventType(event);'" ondrag="return false;" />
Ja danke das haut ganz gut hin, nur hat das ganze noch einen kleinen Schoenheitsfehler:
Halte ich die Maustaste gedrueckt, fahre aus dem Buttonbereich und dann wieder zurueck in den Buttonbereich wird mir das onclick event getriggered sobald in den Button loslasse. Das ist im IE und Modzilla der Fall. Bei Opera wird hier das onclick event nicht ausgefuehrt. Gibt es hier eine Moeglichkeit das Verhalten zu vereinheitlichen?
Optimal waere folgendes Szenario: Halte ich die Maustaste gedrueckt, fahre aus dem Buttonbereich und dann wieder zurueck in den Buttonbereich wird wieder das onMousedown event aufgerufen, und wenn dann schlussendlich die Maustaste loslasse wird mir das onclick event aufgerufen. Jemand eine Idee wie ich das bewerkstelligen koennte?
Danke und Gruss
C
-
-
-