examples - ¿Es posible usar jQuery.on y flotar?

jquery pdf

Question

Tengo un <ul> que se rellena con javascript después de la carga de la página inicial. Actualmente estoy usando .bind con mouseover y mouseout .

El proyecto se acaba de actualizar a jQuery 1.7, por lo que tengo la opción de usar .on , pero parece que no consigo que funcione con el hover . ¿Es posible utilizar .on con hover ?

EDITAR : Los elementos a los que estoy enlazando se cargan con javascript después de que se carga el documento. Es por eso que estoy usando y no solo hover .

Answer 1

( Mire la última edición de esta respuesta si necesita usar .on() con elementos .on() con JavaScript )

Use esto para los elementos que no se llenan usando JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover() tiene su propio controlador: http://api.jquery.com/hover/

Si quieres hacer varias cosas, .on() en el controlador .on() forma:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

De acuerdo con las respuestas proporcionadas a continuación, puede utilizar el hover con .on() , pero:

Aunque está muy desaconsejado para el nuevo código, es posible que vea el pseudo-evento-nombre "desplazamiento" utilizado como una abreviatura para la cadena "mouseenter mouseleave". Adjunta un solo controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el pseudo-evento-nombre "hover" con el método .hover (), que acepta una o dos funciones.

Además, no hay ventajas de rendimiento al usarlo y es más voluminoso que solo usar mouseenter o mouseleave . La respuesta que proporcioné requiere menos código y es la forma correcta de lograr algo como esto.

EDITAR

Ha pasado un tiempo desde que esta pregunta fue respondida y parece haber ganado algo de tracción. El código anterior sigue en pie, pero quería agregar algo a mi respuesta original.

Si bien prefiero usar mouseenter y mouseleave (me ayuda a entender qué sucede en el código) con .on() es lo mismo que escribir lo siguiente con hover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Ya que la pregunta original preguntaba cómo podrían usar correctamente on() con hover() , pensé que corregiría el uso de on() y no me pareció necesario agregar el código hover() en ese momento.

EDITAR 11 DE DICIEMBRE DE 2012

Algunas de las nuevas respuestas proporcionadas a continuación detallan cómo .on() funcionar .on() si el div en cuestión se llena usando JavaScript. Por ejemplo, supongamos que se rellena un div mediante el evento .load() jQuery''s, así:

(function ($) {
    //append div to document body
    $(''<div class="selector">Test</div>'').appendTo(document.body);
}(jQuery));

El código anterior para .on() no se mantendría. En su lugar, debes modificar tu código ligeramente, como esto:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

Este código funcionará para un elemento poblado con JavaScript después de que haya ocurrido un evento .load() . Solo cambia tu argumento al selector apropiado.

Answer 2

El complemento jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html va mucho más allá de los enfoques ingenuos que se enumeran aquí. Si bien ciertamente funcionan, es posible que no se comporten necesariamente como esperan los usuarios.

La razón más poderosa para usar hoverIntent es la función de tiempo de espera . Le permite hacer cosas como evitar que se cierre un menú porque un usuario arrastra el mouse un poco demasiado hacia la derecha o la izquierda antes de hacer clic en el elemento que desea. También proporciona capacidades para no activar eventos de sobrevuelo en un aluvión y espera a que se desplace enfocado.

Ejemplo de uso:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

Puede encontrar más información sobre esto en https://.com/a/1089381/37055

Answer 3

La función de desplazamiento de jQuery proporciona funciones de mouseover y mouseout.

$ (selector) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Fuente: http://www.w3schools.com/jquery/event_hover.asp

Answer 4

Ninguna de estas soluciones funcionó para mí al mover el ratón sobre / fuera de los objetos creados después de que el documento se haya cargado cuando la pregunta lo solicita. Sé que esta pregunta es antigua pero tengo una solución para aquellos que aún buscan:

$("#container").on(''mouseenter'', ''.selector'', function() {
    //do something
});
$("#container").on(''mouseleave'', ''.selector'', function() {
    //do something
});

Esto vinculará las funciones al selector, de modo que los objetos con este selector creado después de que el documento esté listo todavía podrán llamarlo.

Answer 5

No estoy seguro de cómo es el resto de tu Javascript, así que no podré saber si hay alguna interferencia. Pero http://api.jquery.com/hover/ funciona bien como un evento con .on() .

$("#foo").on("hover", function() {
  // disco
});

Si desea poder utilizar sus eventos, use el objeto devuelto del evento:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Answer 6

Para los elementos que se agregan dinámicamente, consulte .on() . Estoy citando partes principales: los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada a .on (). Si se está inyectando nuevo HTML en la página, es preferible usar eventos delegados para adjuntar un controlador de eventos, como se describe a continuación.

Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior. Al elegir un elemento que se garantiza que esté presente en el momento en que se adjunta el controlador de eventos delegado, puede usar eventos delegados para evitar la necesidad de adjuntar y eliminar con frecuencia los controladores de eventos.

Además de su capacidad para manejar eventos en elementos descendientes aún no creados, otra ventaja de los eventos delegados es su potencial para una sobrecarga mucho menor cuando se deben monitorear muchos elementos. En una tabla de datos con 1,000 filas en su cuerpo, este ejemplo adjunta un controlador a 1,000 elementos:

$("#dataTable tbody tr").on("mouseenter", function(event){
  alert($(this).text());
});

Un enfoque de eventos delegados adjunta un controlador de eventos a un solo elemento, el tbody, y el evento solo necesita aumentar un nivel (del tr al tbody):

$("#dataTable tbody").on("mouseenter", "tr", function(event){
  alert($(this).text());
});

Nota: Los eventos delegados no funcionan para SVG.

Answer 7

Puede proporcionar uno o varios tipos de eventos separados por un espacio.

Así que hover es igual a mouseenter mouseleave .

Esta es mi sugerencia:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Answer 8

Puede usar .on() con el hover lo que dice la sección Notas adicionales:

Aunque está muy desaconsejado para el nuevo código, es posible que vea el pseudo-evento-nombre "desplazamiento" utilizado como una abreviatura para la cadena "mouseenter mouseleave". Adjunta un solo controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el pseudo-evento-nombre "hover" con el método .hover (), que acepta una o dos funciones.

Eso sería hacer lo siguiente:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

EDITAR (nota para usuarios de jQuery 1.8+):

En desuso en jQuery 1.8, eliminado en 1.9: El nombre "hover" se usa como una abreviatura para la cadena "mouseenter mouseleave". Adjunta un solo controlador de eventos para esos dos eventos, y el controlador debe examinar event.type para determinar si el evento es mouseenter o mouseleave. No confunda el pseudo-evento-nombre "hover" con el método .hover (), que acepta una o dos funciones.

Answer 9

Si lo necesitas como condición en otro evento, lo resolví de esta manera:

$(''.classname'').hover(
     function(){$(this).data(''hover'',true);},
     function(){$(this).data(''hover'',false);}
);

Luego, en otro evento, puedes usarlo fácilmente:

 if ($(this).data(''hover'')){
      //...
 }

(Veo algo de uso de is('':hover'') para resolver esto. Pero este no es (todavía) un selector de jQuery válido y no funciona en todos los navegadores compatibles)

Answer 10

Simplemente navegué desde la web y sentí que podía contribuir. Noté que con el código anterior publicado por @calethebrewer puede dar lugar a múltiples llamadas a través del selector y un comportamiento inesperado, por ejemplo:

$(document).on(''mouseover'', ''.selector'', function() {
   //do something
});
$(document).on(''mouseout'', ''.selector'', function() {
   //do something
});

Este violín http://jsfiddle.net/TWskH/12/ mi punto. Cuando animo elementos como en los complementos, he encontrado que estos disparadores múltiples dan como resultado un comportamiento involuntario que puede resultar en que la animación o el código sean llamados más de lo necesario.

Mi sugerencia es simplemente reemplazar con mouseenter / mouseleave: -

$(document).on(''mouseenter'', ''.selector'', function() {
   //do something
});
$(document).on(''mouseleave'', ''.selector'', function() {
   //do something
});

Aunque esto impidió que se llamaran múltiples instancias de mi animación, finalmente fui con mouseover / mouseleave ya que necesitaba determinar cuándo los hijos de los padres estaban siendo desplazados.

Answer 11

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({''color'':''red''});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({''color'':''blue''});

}},''tr'');