Основные события

Question

Привет, мне было интересно, как я справляюсь с состоянием удаления при наведении, используя backbone и js

, в настоящее время у меня есть

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

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

Мне было интересно, как бы я обработал событие, когда я перемещаю свою мышьдалеко от элемента с классом .info

Если я делаю стандартный сценарий кофе внутри, чтобы сделать это внутри обработчика событий hover: для его работы требуется 2 наведения.

Я в основном хочу подражать

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

Спасибо

Answer 1

Из документов jQuery :

Вызов $(selector).hover(handlerIn, handlerOut) является сокращением для:

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

Так что я думаю, что лучший способ справиться с этим с помощью Backbone - это просто установить два события (извините, я не верю в CoffeeScript):

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

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

В качестве альтернативы, вы можете использовать синтаксис с одним аргументом , который принимает одну функцию и вызывает ее как внутри, так и снаружи - это хорошо работает с .toggle() и toggleClass().

Answer 2

Существует версия hover(), которая принимает одну функцию обратного вызова :

Описание: Привязать один обработчик к соответствующим элементам, чтобывыполняется, когда указатель мыши входит в элементы или покидает их.

Это версия hover, которая будет использоваться Backbone.Таким образом, вы могли бы справиться с этим с помощью toggleClass и парой классов CSS, вместо того, чтобы напрямую возиться с css:

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

По умолчанию будет установлен цвет #F3Fэлемент по умолчанию, и вы будете иметь:

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

в ваших таблицах стилей.Если по какой-то причине вы не можете использовать toggleClass, вам придется привязываться к mouseenter и mouseleave по отдельности.

Answer 3

В этом точном примере, однако, вы должны действительно использовать псевдокласс css: hover вместо jquery.

Answer 4

Если это не ссылка действия, вы можете выполнить css: pointer-events:none