javascript - jquery：绑定多个事件，然后取消绑定其中几个？这是正确的吗？

Question

绑定多个事件，然后取消绑定其中几个？这是正确的吗？

基本上，当您将鼠标悬停在元素上时，背景颜色会发生变化，然后当您将鼠标悬停在元素之外时会变回来，但是当您单击元素时，我想禁用悬停效果并将背景颜色更改为不同的颜色，以便用户知道他们点击了它。最好的方法是什么？谢谢！

$('.tellmereplies').bind({click: function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $('.tellmereplies').unbind('mouseover','mouseout')
},mouseover: function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
},mouseout: function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
}
});

Answer 1

看看 jquery 的事件命名空间。我认为这可能对你有用。

$("#div1").bind("event_name.namespace1");
$("#div1").bind("some_other_event.namespace1");
$("#div1").bind("event_name.namespace2");
$("div1").unbind(".namespace1");

Answer 2

我想你正在寻找这个：

$('.tellmereplies').bind("click", function() {
    $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'})
    $(this).unbind('mouseover mouseout')
}).bind("mouseover", function() {
    $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'})
}).bind("mouseout", function() {
    $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'})
});

Answer 3

我主要在 CSS 中执行此操作。您可以使用 :hover 伪类为链接创建悬停效果

.tellmereplies:hover {
    color: #fff;
    background-color: #0099ff;
}

然后当用户单击链接时，为链接添加另一个类值并覆盖链接的悬停效果。

$('.tellmereplies').addClass('tellmereplies-clicked');

.tellmereplies-clicked {
    /* new colors */
}

.tellmereplies-clicked:hover {
    /* new colors */
}