Question

我有一个包含三个标签的网站，我正在尝试动态添加鼠标悬停/鼠标输出事件，具体取决于单击哪个标签，问题是看到鼠标悬停/输出事件在标签后“绑定”到标签我叫了。有没有办法从标签中“取消绑定”事件？

这是我的js的样子

onTab1Clicked()
{
    $('#tab2').mouseover(function() {
        $('#tab2').addClass('outlineBorder');
        });
    $('#tab2').mouseout(function() {
        $('#tab2').removeClass('outlineBorder');
        });
    $('#tab3').mouseover(function() {
        $('#tab3').addClass('outlineBorder');
        });
    $('#tab3').mouseout(function() {
        $('#tab3').removeClass('outlineBorder');
        });
}

onTab2Clicked()
{
    $('#tab1').mouseover(function() {
        $('#tab1').addClass('outlineBorder');
        });
    $('#tab1').mouseout(function() {
        $('#tab1').removeClass('outlineBorder');
        });
    $('#tab3').mouseover(function() {
        $('#tab3').addClass('outlineBorder');
        });
    $('#tab3').mouseout(function() {
        $('#tab3').removeClass('outlineBorder');
        });
}

onTab3Clicked()
{
    $('#tab2').mouseover(function() {
        $('#tab2').addClass('outlineBorder');
        });
    $('#tab2').mouseout(function() {
        $('#tab2').removeClass('outlineBorder');
        });
    $('#tab1').mouseover(function() {
        $('#tab1').addClass('outlineBorder');
        });
    $('#tab1').mouseout(function() {
        $('#tab1').removeClass('outlineBorder');
        });
}

这在页面加载时工作正常但是如果我从tab1（页面加载状态）单击到另一个选项卡然后返回到tab1，鼠标悬停/移出事件仍会触发。

感谢。

Answer 1

您可以在此处进行一些非常简单的更改，从而简化整体方法。首先，为这些#tab1，#tab2和#tab3元素添加一个类，例如class="tab"然后你可以这样做：

$(".tab").click(function() {
  $(this).addClass('active'); //make this tab active
  $(".tab").not(this).removeClass('active'); //make other tabs inactive
});

现在，当您单击任何选项卡时，它将获得“活动”类，而其他选项将无法使用它。然后，您可以.live()使用:not() selector来获得所需的悬停效果，如下所示：

$('.tab:not(.active)').live('mouseover mouseout', function() {
  $(this).toggleClass('outlineBorder');
});

此选项卡在.active时不会对标签执行操作，因此悬停效果仅适用于未选项的标签，就像您最初使用的那样，但更容易维持。

Answer 2

$('#tab1,#tab2,#tab3').click(function(){
    $(this).unbind('mouseout mouseover');
    // this will unbind mouseout and mouseover  events when click
    // e.g. onTab1Clicked, mouseout and mouseover events will be unbind on tab1
})

Answer 3

是的，你差不多了！

$('#tab3').unbind('mouseout');

如何删除mouseover / mouseout事件

3 个答案: