2010-03-17 21 views
6

General javascript pregunta aquí, que también sería bueno saber cómo (si es posible) hacer en jquery.¿Es posible activar un evento de clic al pasar el mouse sobre él?

¿Puede activar un evento de clic al pasar el ratón sobre un elemento?

Sé que habrá personas que pregunten por qué, pero por favor sólo pónganse en serio.

Muchas gracias, C

+0

Si sabes que la gente va a preguntar acerca de la explicación? – Quentin

Respuesta

11

Echa un vistazo a la función trigger:

$(someElement).trigger('click'); 
+0

Excelente. ¿Alguna vez escribí aquí para cualquier persona interesada ... http: //blog.clintonbeattie.com/monitor-hovered-items-in-google-analytics/ –

4

sólo tiene que utilizar click()

$(selector).click(); 

O, alternativamente, basta con mover el código click() hacia una función común y llame al hover().

4

En pocas palabras:

$(selector).mouseenter(function() { $(this).click() }); 
0
$('#selector').bind('mouseover',function(){ 

/*DO WHAT YOU WANT HERE*/ 


}); 

que debe hacer el truco

0

jQuery puede desencadenar un 'clic' sobre todos los objetos excepto etiqueta de un

vamos a probar este código en la consola y vea qué sucede en esta página

$('a').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('hover'); // let me know when it hovering <a> 
}); 
2
$('myselector').hover(function(){ 
    $(this).trigger('click'); 
}); 

EDITAR: mucho más tarde que la publicación, pero solo para ilustrar cómo agregar el controlador Y dispararlo.

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).on('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}).trigger('click'); 

¿Necesitas una vez?

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).one('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here once 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseenter',function(){ 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}); 
0

Es posible activar un evento de clic al desplazarse.

Prueba el siguiente ejemplo:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>hover + (mouseup/mousedown, click) demo</title> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p class="up">Press mouse and release here.</p> 
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p> 
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p> 
<p class="hover3">Press mouse and release here. HOVER.CLICK</p> 

<script> 
$("p.up") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover1") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }) 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover2") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover2") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover3") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover3") 
    .click(function() { 
    $(this).append("<span style='color:#00f;'>CLICK.</span>"); 
    }); 
</script> 

</body> 
</html> 
0

Es posible que desee añadir también un retraso en el vuelo estacionario para que no se activará inmediatamente. El retraso será útil si va a usarlo en una lista de miniaturas.

var hoverTimer; 
var hoverDelay = 200; 

$('.classSelector').hover(function() { 
    var $target = $(this); 
    // on mouse in, start a timeout 
    hoverTimer = setTimeout(function() {   
     // do your stuff here 
     $target.trigger('click');   
    }, hoverDelay); 
}, function() { 
    // on mouse out, cancel the timer 
    clearTimeout(hoverTimer); 

}); 
Cuestiones relacionadas