eventi Backbone

Question

Ciao mi chiedevo come avrei gestire lo stato di rimozione hover con spina dorsale e js

Attualmente ho

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

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

mi chiedevo come avrei gestire l'evento in cui muovo il mouse dal l'elemento con la classe .info

Se faccio lo script di caffè standard all'interno per farlo all'interno del passaggio del mouse: gestore di eventi richiede 2 al passaggio del mouse per farlo funzionare.

Io fondamentalmente vogliamo imitare

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

Grazie

Answer 1

Esiste una versione di hover() that takes one callback function:

Descrizione: Associare un singolo gestore agli elementi abbinati, da eseguire quando il puntatore del mouse entra o esce elementi.

Questa è la versione di hover che verrà utilizzata da Backbone. Così si potrebbe gestire questo con toggleClass e un paio classi CSS invece di pasticciare direttamente in giro con il css:

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

Il colore predefinito #F3F sarebbe impostare sull'elemento per impostazione predefinita e si sarebbe avere:

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

nei fogli di stile. Se per qualche motivo non è possibile utilizzare toggleClass, è necessario eseguire il binding su mouseenter e mouseleave singolarmente.

Answer 2

Dal jQuery docs:

Calling $(selector).hover(handlerIn, handlerOut) è una scorciatoia per:

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

Quindi penso che il modo migliore per gestire questo con Backbone è solo quello di impostare due eventi (mi dispiace, io non credo in CoffeeScript):

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

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

In alternativa, è possibile utilizzare la single argument syntax, che prende una funzione e la chiama sia dentro che fuori - questo funziona bene con .toggle() e toggleClass().

Answer 3

In questo preciso esempio, tuttavia, è necessario utilizzare effettivamente css :hover pseudo class anziché jquery.

Answer 4

Se non si tratta di un collegamento azione allora si può seguente css: pointer-events:none