javascript - 单击事件阻止鼠标移开触发

Question

最终编辑:我找到了一个更好的解决方案，并且对此更简单 codepen 。一个demo工作功能。

编辑:我找到了错误的来源，您可以查看示例 here 。当您单击“关于”选项卡并将鼠标悬停在联系人上并移出时，内容应该被隐藏。但是您返回将鼠标悬停在“关于”上，内容仍然可见，但事实并非如此。如何确保单击后触发 mouseout 事件？

编辑2:所以我注意到 unbind() 方法阻止了这种情况。当我删除它时，我似乎无法让内容区域在单击时保持事件状态，因为 mouseout 方法会覆盖它。

我对此做了一些研究，但找不到解决方案来解释为什么悬停时删除类不起作用。我遇到了 addClass() 和 removeClass() 函数的错误。问题是我让这些函数在悬停或鼠标悬停/鼠标移开以及单击时触发，因此有点令人困惑。这是我正在使用的演示:JSFiddle 。

Full screen为了更好的视野。

我的 JavaScript 可能有点困惑，但最终它应该是这样工作的:

1. 如果您将鼠标悬停在 map 上的某个点上，左侧红色框中的内容应显示与该位置相关的内容以及位置名称的“工具提示”。 (这部分有效)

2.您将鼠标移开，它应该返回到位置列表，并且工具提示消失。几乎就像重置一样。

3. 现在，如果您单击该点，工具提示和左侧的内容都应保持事件状态。直到您单击红色框中的“返回列表”链接或将鼠标悬停在其他点上。 (这也有效)

我遇到的错误是，如果您在列表面板周围单击并将鼠标悬停在几个位置点上一段时间后，当您将鼠标悬停在几个位置上时，悬停状态保持事件状态(这不会发生) 。当您将鼠标悬停在 map 上的位置点之外时，一切都会返回列表面板。

    $('a.location').click(function (event) {
    var loc = this.id;
    if ($('div.panel').hasClass('list')) {
        $('div.' + loc).removeClass('current');
        $('.list').addClass('current');
    }
    $('.list').removeClass('current');
    $('div.panel.' + loc).addClass('current');
    event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
    $('.panel').removeClass('current');
    $('.list').addClass('current');
    $('div.location-title.show').removeClass('show').addClass('hide');
    $('div.location-title.view').removeClass('view');
    e.preventDefault();
}); //back button


$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');

}, function () {
    var dot = this.id;
    //hide location hover
    $('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
    var dot = this.id;
    if (!$('div.location-title.' + dot).hasClass('hide')) {
        $('div.location-title.' + dot).addClass('view');
    } else {
        $('div.location-title.' + dot).removeClass('view');
    }
    event.preventDefault();
});

$('.map__container > span').on({
mouseover: function () { //mouseover
    var loc = $(this).attr('class');
    $('.panel').siblings().removeClass('current'); //resets all classes that have current
    $('.list').removeClass('current');
    $('div.panel.' + loc).addClass('current');
    $('div.show').removeClass('show').addClass('hide');
    $('div.location-title.' + loc).removeClass('hide').addClass('show');
    var asb = $('.location-title').siblings();
    $('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
    var loc = $(this).attr('class');
    $('div.' + loc).removeClass('current');
    $('div.location-title.' + loc).removeClass('show').addClass('hide');
    if (!$('div.' + loc).hasClass('current')) {
        $('.list').addClass('current');
    } else {
        $('.list').addClass('current');
    }
},
click: function () {
    $(this).off('mouseout');
    var loc = $(this).attr('class');
    $('div.location-title.show').removeClass('show').addClass('hide');
    $('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});

此外，如果您有更好的建议来清理我的 JavaScript，我会洗耳恭听。非常感谢!

Answer 1

如果我理解正确，您可能想尝试使用事件 Mouseleave，我将使用模块化函数toggleClass:

• ToggleClass function Jquery

• Mouseleave explanation:

  mouseleave: function () { //mouseout
  var loc = $(this).attr('class');
  $('div.' + loc).removeClass('current');
  $('div.location-title.' + loc).removeClass('show').addClass('hide');
     if (!$('div.' + loc).hasClass('current')) {
        $('.list').addClass('current');
     } else {
        $('.list').addClass('current');
  }
  },
  

我希望这对您有帮助。致敬!