imagen - onmouseover javascript ejemplo
Evento Javascript onHover (4)
¿Puedes aclarar tu pregunta? ¿Qué es "ohHover" en este caso y cómo se corresponde con un retraso en el tiempo de vuelo estacionario?
Dicho eso, creo que lo que probablemente quieras es ...
var timeout;
element.onmouseover = function(e) {
timeout = setTimeout(function() {
// ...
}, delayTimeMs)
};
element.onmouseout = function(e) {
if(timeout) {
clearTimeout(timeout);
}
};
O addEventListener / attachEvent o el método de abstracción de eventos de tu biblioteca favorita.
¿Existe alguna forma canónica de configurar un evento JS onHover con el onmouseover, onmouseout y algún tipo de temporizadores existentes? O simplemente cualquier método para activar una función arbitraria si y solo si el usuario se ha mantenido sobre el elemento durante cierto tiempo.
No creo que necesites / quiera el tiempo de espera.
onhover (hover) se definiría como el período de tiempo mientras "sobre" algo. En mi humilde opinión
onmouseover = start...
onmouseout = ...end
Para el registro, he hecho algunas cosas con esto para "falsificar" el evento hover en IE6. Fue bastante caro y al final lo abandoné a favor del rendimiento.
Si usa la biblioteca JQuery, puede usar el evento .hover () que fusiona el evento mouseover y mouseout y lo ayuda con los elementos secundarios y secundarios:
$(this).hover(function(){},function(){});
La primera función es el inicio del vuelo estacionario y el siguiente es el final. Lea más en: http://docs.jquery.com/Events/hover
¿Qué tal algo como esto?
<html>
<head>
<script type="text/javascript">
var HoverListener = {
addElem: function( elem, callback, delay )
{
if ( delay === undefined )
{
delay = 1000;
}
var hoverTimer;
addEvent( elem, ''mouseover'', function()
{
hoverTimer = setTimeout( callback, delay );
} );
addEvent( elem, ''mouseout'', function()
{
clearTimeout( hoverTimer );
} );
}
}
function tester()
{
alert( ''hi'' );
}
// Generic event abstractor
function addEvent( obj, evt, fn )
{
if ( ''undefined'' != typeof obj.addEventListener )
{
obj.addEventListener( evt, fn, false );
}
else if ( ''undefined'' != typeof obj.attachEvent )
{
obj.attachEvent( "on" + evt, fn );
}
}
addEvent( window, ''load'', function()
{
HoverListener.addElem(
document.getElementById( ''test'' )
, tester
);
HoverListener.addElem(
document.getElementById( ''test2'' )
, function()
{
alert( ''Hello World!'' );
}
, 2300
);
} );
</script>
</head>
<body>
<div id="test">Will alert "hi" on hover after one second</div>
<div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div>
</body>
</html>