骨干事件答案

【问题标题】：Backbone events骨干事件
【发布时间】：2011-12-11 09:07:20
【问题描述】：

您好，我想知道如何使用主干和 js 处理删除悬停状态

目前我有

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

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

我想知道如何处理将鼠标从带有类 .info 的元素上移开的事件

如果我在内部执行标准咖啡脚本以在悬停：事件处理程序中执行此操作，它需要 2 次悬停才能工作。

我基本上是想模仿

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

谢谢

【问题讨论】：

标签： jquery css backbone.js coffeescript

【解决方案1】：

来自jQuery docs：

调用$(selector).hover(handlerIn, handlerOut) 是以下的简写：

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

所以我认为用 Backbone 处理这个问题的最好方法就是设置两个事件（抱歉，我不相信 CoffeeScript）：

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

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

或者，您可以使用single argument syntax，它接受一个函数并在输入和输出中调用它 - 这适用于.toggle() 和toggleClass()。

【讨论】：

这个答案在不使用简单切换时效果更好。谢谢！

【解决方案2】：

有hover() that takes one callback function的版本：

说明：将单个处理程序绑定到匹配的元素，当鼠标指针进入或离开元素时执行。

这是 Backbone 将使用的 hover 版本。所以你可以用 toggleClass 和几个 CSS 类来处理这个问题，而不是直接搞乱css：

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

默认的#F3F颜色会默认设置在元素上，你会有：

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

在您的样式表中。如果由于某种原因不能使用toggleClass，则必须分别绑定到mouseenter 和mouseleave。

【讨论】：

值得注意的是，方向是传递给处理函数的。 hover(e) {console.log(e.type);} // outputs 'mouseenter' or 'mouseleave'

【解决方案3】：

然而，在这个精确的例子中，你应该使用 css :hover pseudo class 而不是 jquery。

【讨论】：

【解决方案4】：

如果它不是一个动作链接，那么你可以关注 css ：pointer-events:none

【讨论】：