mouseout "deaktivieren"

Professional

Friday, January 22nd 2010, 4:36am

mouseout "deaktivieren"

Hallo, ich bekomm hier gerade die Wut. Ich komm nicht weiter.

Und zwar habe ich mir mit Prototype und scriptaclous eine kleine Bildergalerie gemacht. Ich zeig mal den wichtigsten Codeausschnitt.
Opacity wird bei mouseover erhöht und bei mouseout verringert. Damit das ganze sich nicht überschneidet, wird mit busy gearbetet um zu sehen wenn der effekt fertig ist.

JavaScript Code

var li = $$('a img').each(function(element) {
 
var busy = false, over, out;	
 
		element.setOpacity(0.5);
 
 
		element.observe('mouseover', (over = function(event) {
 
 
			if(this.getStyle('opacity')==0.5) {
			Effect.Appear(this, { 
				from: 0.5,
				to: 1,
				duration:0.5,
				beforeStart: function() {busy=true},
				afterFinish: function() {busy=false},
				});
 
			}
		}.bind(element)))
 
		element.observe('mouseout', (out = function(event) {
				if(busy){
				window.setTimeout(function() {out(event)},200)
				}else{
				Effect.Fade(this, { 
				from: this.getStyle('opacity'),
				to: 0.5,
				duration:0.5,
				beforeStart: function() {busy=true},
				afterFinish: function() {busy=false},
				});
				}
 
		}.bind(element)));
	});
 
});

So das funktioniert alles auch. Das problem was ich jetzt habe, ich möchte ein Handler hinzufügen und zwar onClick. Passiert das, wird die class geändert und onmouseout soll "deaktiviert" werden, damit das Bild nicht wieder ausfaded. Jedoch wie stelle ich das an?

Ich hab versucht mouseout zu "überschreiben" oder ins Leere zu führen, es hat aber nichts gebracht.

Mein Versuch sah bisher so aus:

JavaScript Code

element.observe('click', (on = function(event) {
		Event.stop(event);
 
		//element.observe('mouseout', (out = function(event) {});
                // out='';
		this.up(0).className='cthumb'; // a Element neue class zuweisen
		}.bind(element)));

Mal schaun ob jemand helfen kann, danke im Vorraus.

Lemmi

Professional

Posts: 651

Saturday, January 23rd 2010, 9:53am

Um Event-Handler zu löschen, gibt es in Protoype den Befehl Event.stopObserving(); (http://api.prototypejs.org/dom/event.htm…ng-class_method). Da du ja den Event-Handler in der Variable out speicherst, kannst du Ihn einfach über die Funktion stopObserving löschen oder auch wieder registrieren.

Quoted from "api.prototypejs.org"
JavaScript Code
1
$('foo').observe('click', myHandler);
...we can stop observing using that handler like so:
JavaScript Code
1
$('foo').stopObserving('click', myHandler);
If we want to remove all 'click' handlers from 'foo', we leave off the handler argument:
JavaScript Code
1
$('foo').stopObserving('click');
If we want to remove all handlers for all events from 'foo' (perhaps we're about to remove it from the DOM), we simply omit both the handler and the event name:
JavaScript Code
1
$('foo').stopObserving();