Problema con eventos en JSPlus

[_cronos2]

Buenas noches amigos, estoy tratando de hacer un slider muy sencillo para un proyecto y lo estoy haciendo con mi intento de librería pero tengo problemas con los eventos. De momento dejo aquí el enlace al ejemplo (pongo bordes para que se vean bien las dimensiones).
Al contrario de lo que cabría pensar, no es que no funcione, si no que funciona demasiado El código es este:

Código HTML:

<div id="JSPlus-slider">
 <img src="http://findicons.com/files/icons/99/office/128/back.png" alt="Anterior" title="Anterior" class="slider-prev" />
 <div class="slider-container">
  <!-- Contenido -->
 </div>
 <img src="http://findicons.com/files/icons/99/office/128/forward.png" alt="Siguiente" title="Siguiente" class="slider-next" />
</div>
 

Y el JS:

Código Javascript:

P('#JSPlus-slider').hover(function(){
 P('.slider-prev, .slider-next').entrada(200);
});
 
P('#JSPlus-slider').out(function(){
 P('.slider-prev, .slider-next').salida(200);
});
 

Como veis no tiene mucho misterio, sólo quiero que al salir del div del slider las flechas hagan un fadeOut, y viceversa. Pero hay dos problemas: el primero es que a veces, cuando entro en el div "ventana" (#JSPlus-slider), se hace un entrada-salida-entrada, sobre todo cuando se entra lentamente. El segundo es que, cuando entro en una de las flechas, se ejecuta el evento out, y luego el hover.
Para colmo, no sé cómo, pero jQuery no tiene este problema:

Código Javascript:

$('#JSPlus-slider').hover(function(){
 $('.slider-prev, .slider-next').fadeIn(200);
}, function(){
 $('.slider-prev, .slider-next').fadeOut(200);
});
 

No sé qué puede ser, pero me está dando un buen dolor de cabeza Espero que me podáis ayudar.
Saludos y gracias (:

[zerokilled]

¡que tal, cronos!

estoy casi seguro que debe ser el problema común donde registras dos eventos, mouseover y mouseout. sin embargo, no significa que sea un problema tonto. es un efecto que sucede debido a la forma que trabaja ambos eventos. dichos eventos se inician cuando el puntero entra o sale del elemento, sea cual sea independientemente de su relación estructural (parent, child, sibling). en alguna ocasión alguien expuso una consulta similar, http://www.forosdelweb.com/showthread.php?t=866467. revisa el tema. ahí expuse una explicación, un ejemplo para demostrarlo y una posible solución.

[_cronos2]

Gracias por contestar!
He revisado el tema y he probado el código (que por cierto me volví loco hasta que no me di cuenta de que el firstChild era un textNode y tuve que usar firstElementChild ), bastante gráfico y explicativo. He tratado de ver cómo lo hace jQuery, pero como usa bind y trigger y son dos funciones bastante complejas (o por lo menos largas) no me he enterado.
Se me ocurre imitar el estilo de jQuery, usar una función para hover y out, pasándole dos funciones, y cada vez que ocurra el evento comprobar si alguna propiedad de event (ahora mismo no sé cuál) es hijo del elemento en cuestión. Creo que aquí está toda la información que necesito, voy a ver qué saco en claro
Saludos y gracias de nuevo (:

[_cronos2]

Creo que he acabado de estropearlo. Antes por lo menos tenía un comportamiento predecible, ahora hace lo que quiere
Este es el código actual:

Código Javascript:

hover : function(toDo){
            return this.evento('mouseover', function(e){
                var from = e.relatedTarget || e.fromElement;
                !this.esPadre(from) && toDo.call(this, e);
            });
        },
out : function(toDo){
            return this.evento('mouseout', function(e){
                var to = e.relatedTarget || e.toElement;
                !this.esPadre(to) && toDo.call(this, e);
            });
        },
esPadre : function(hijo){
         var padre = hijo.parentNode;
            while(this != padre){
             if(padre.tagName.toLowerCase() == 'html'){ return false; }
                padre = padre.parentNode;
            }
            return true;
        }
 

El ejemplo sigue estando en el mismo sitio, por favor échale un vistazo
Saludos y gracias :D

[_cronos2]

Bueno parece que uno de los problemas ya se ha solucionado. Ahora el contenedor se comporta como un bloque, y sólo responde cuando realmente se entra y se sale de él (no acaba de funcionar en el ejemplo pero en el slider real sí).
Ahora falta el otro problema, cuando salgo/entro lentamente, ocurre algo muy raro. Por ejemplo, si entro en el contenedor (despacio), las flechas se muestran, se ocultan, y hacen el fadeIn (las "primeras dos veces" es como si cambiara el visibility a visible y después a hidden). Sin embargo este problema no sucede en el ejemplo Realmente no sé qué puede estar pasando, y me gustaría solucionar esto del slider cuanto antes.
Saludos y gracias :D
Edit: Siento si he dicho/hecho algo que haya podido disgustar a la persona que ha "votado en contra" de este tema, de verdad que no sé qué puedo haber dicho para molestar, pero no era mi intención

[Aijoona]

Este metodo

Código Javascript:

esPadre : function(hijo){
   var padre = hijo.parentNode;
   while(this != padre){   
    if(padre.tagName.toLowerCase() == 'html'){ return false; }
    padre = padre.parentNode;
   }
   return true;
  }
 

Deberia chequear primero que el parentNode no sea el document:

Código Javascript:

esPadre : function(hijo){
   var padre = hijo.parentNode;
   while(this != padre){   
    if(padre.nodeType == 9 || padre.tagName.toLowerCase() == 'html'){ return false; }
    padre = padre.parentNode;
   }
   return true;
  }
 

Ya con eso deja de llenarme la consola de errores.

[_cronos2]

Gracias por contestar @Aijoona!
Y gracias también por el bug fix, pero el problema principal es lo que ya he descrito, que al entrar/salir lentamente ocurre algo muy raro. ¿Crees que sabes de dónde puede venir el problema?
Saludos y gracias otra vez :D

[Aijoona]

Por lo que vi hay veces que disparas el evento más de una vez:

Código Javascript:

P('#JSPlus-slider').hover(function(){
    console.log('EVENT HOVER');
 P('.slider-prev, .slider-next').entrada(200);//.opacity(0).css('display', 'block')
});
 
P('#JSPlus-slider').out(function(){
    console.log('EVENT OUT');
 P('.slider-prev, .slider-next').salida(200)//, function(){ this.css('display', 'none'); });
});
 

[_cronos2]

Hmmm, por lo que parece se debe al border, porque si lo quito no se producen los eventos dos veces seguidas. Realmente el border no creo que lo necesite en la versión final, sino que lo tengo puesto para controlar las dimensiones de los contenedores, pero sí me gustaría arreglar el asunto para futuras ocasiones.
No estoy seguro, pero creo que jQuery no tenía este problema (el otro sí que no lo tenía).
¿Se os ocurre por qué el border está interfiriendo de esta manera en los eventos?
Saludos y muchas gracias por dar con la raíz del problema, ahora sólo queda la solución