¿Existe alguna forma canónica de configurar un evento JS onHover con el onmouseover existente, onmouseout y algunos tipos de temporizadores? 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.Javascript onHover evento
¿Puede aclarar su pregunta? ¿Qué es "ohHover" en este caso y cómo se corresponde con un retraso en el tiempo de vuelo estacionario?
Dicho esto, creo que lo que es probable que desee ... es
var timeout;
element.onmouseover = function(e) {
timeout = setTimeout(function() {
// ...
}, delayTimeMs)
};
element.onmouseout = function(e) {
if(timeout) {
clearTimeout(timeout);
}
};
O addEventListener/attachEvent o método de abstracción caso de su biblioteca favorita.
No creo que necesite/desee el tiempo de espera.
onhover (hover) se definiría como el período de tiempo mientras se "sobre" algo. En mi humilde opinión
onmouseover = start...
onmouseout = ...end
Para que conste que he hecho algunas cosas con esto para el caso de la libración "falso" en IE6. Fue bastante caro y al final lo abandoné a favor del rendimiento.
¿Qué tal algo así?
<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>
Si utiliza la librería jQuery se puede utilizar el evento .hover() que se fusiona el evento mouseover y mouseout y le ayuda con la sincronización y elementos secundarios:
$(this).hover(function(){},function(){});
La primera función es el comienzo del vuelo estacionario y el siguiente es el final. Más información en: http://docs.jquery.com/Events/hover
¡Un gran consejo! Creo que en realidad fusiona los eventos mouseenter y mouseleave de jQuery (que son ligeramente diferentes), por cierto. –
jQuery no se menciona en la pregunta. – jguffey
Espero que el tiempo de espera se desee para evitar que se produzcan eventos cuando el usuario simplemente pasa el mouse sobre el elemento (como por accidente o cuando se mueve a otra parte de la interfaz). Los menús de apertura también se abren, pero no tienen demoras, entonces el usuario puede verse confrontado con menús que se abren instantáneamente sobre otras cosas mientras el usuario simplemente intenta mover el mouse por la página. –
@IIsi 50MHz - eso es bastante posible, especialmente si el onmouseout borra el temporizador similar a la respuesta de @Peter Bailey anterior. En el momento que respondí, estaba pensando que el OP posiblemente estaba confundido en cuanto a cómo funcionaba el mouse over/out/enter/leave events e intentaba hacer The Complicator's Gloves: http://thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx – scunliffe