eventos Backbone

Question

Hola me preguntaba cómo manejar el estado de eliminación vuelo estacionario usando la columna vertebral y JS

Actualmente tengo

events: { 
    "hover .info" : "hover" 
}, 

hover:(e) => 
    $(e.currentTarget).css("background-color", "#333") 

me preguntaba cómo iba a manejar el evento en el que muevo el ratón fuera de el elemento con la clase .info

Si hago una secuencia de comandos de café estándar dentro para hacer esto dentro del control deslizante: el controlador de eventos requiere 2 desplazamientos para que funcione.

Básicamente quiero imitar

$(".info").hover(
    function() { 
     $(this).css("background-color", "#333") 
    }, 
    function() { 
     $(this).css("background-color", "#F3F") 
    }, 
}); 

Gracias

Answer 1

Hay una versión de hover() that takes one callback function:

Descripción: enlazar un único controlador a los elementos emparejados, para ser ejecutado cuando el puntero del ratón entra o sale de los elementos.

Esta es la versión de hover que será utilizada por Backbone. Por lo que podría manejar esto con toggleClass y un par clases CSS en lugar de jugar directamente alrededor de la css:

hover:(e) => 
    $(e.currentTarget).toggleClass('dark-gray') 

El color por defecto #F3F se establecería en el elemento por defecto y usted tendría que:

.dark-gray { 
    background-color: #333 
} 

en sus hojas de estilo. Si no puede, por algún motivo, usar toggleClass, deberá vincularse a mouseenter y mouseleave individualmente.

Answer 2

Desde el jQuery docs:

Calling $(selector).hover(handlerIn, handlerOut) es la abreviatura de:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Así que creo que la mejor manera de manejar esto con Backbone es sólo para configurar dos eventos (lo siento, yo no creo en CoffeeScript):

events: { 
    "mouseenter .info" : "hoverOn", 
    "mouseleave .info" : "hoverOff" 
}, 

hoverOn: function(e) { ... }, 
hoverOff: function(e) { ... } 

Como alternativa, puede utilizar el single argument syntax, que toma una función y la llama tanto dentro como fuera; esto funciona bien con .toggle() y toggleClass().

Answer 3

En este ejemplo preciso, sin embargo, realmente debería usar css :hover pseudo class en lugar de jquery.

Answer 4

Si no es un enlace de acción, entonces puede CSS siguiente: pointer-events:none