点击事件阻止了鼠标移出触发

Question

最终编辑：我在这个CodePen上找到了一个更好的解决方案和更简单的方法。这是一个工作功能的演示。

编辑：我找到了错误出现的地方，你可以在这里看到一个例子。当你点击“关于”选项卡并悬停在“联系人”上时，内容应该被隐藏。但当你回到“关于”并移开鼠标时，内容仍然可见，这是不对的。如何确保鼠标移开事件在点击后被触发？

编辑2：我注意到unbind()方法可以防止这种情况。当我删除它时，似乎无法使内容区域在点击时保持活动状态，因为mouseout方法会覆盖它。

我进行了一些研究，但没有找到解决鼠标悬停时removeClass不起作用的原因。我遇到了addClass()和removeClass()函数的一个bug。问题是我让这些函数在悬停或mouseover/mouseout和点击时触发，所以有点混淆。这是我正在处理的一个演示：JSFiddle。

全屏查看以获得更好的视图。

我的JavaScript可能有点混乱，但最终它应该按照以下方式工作：

1. 如果你悬停在地图上的一个点上，左侧红色框中的内容应该显示与该位置相关的内容，以及位置名称的“工具提示”（这部分可以正常工作）。

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

3. 现在，如果你点击该点，工具提示和左侧的内容都应该保持活动状态。直到你单击红框中的“返回列表”链接或悬停在其他点上。（这也可以正常工作）

我遇到的问题是，如果你在列表面板周围点击并悬停在某些位置点上，过了一会儿后，当你悬停在某些位置上时，悬停状态会保持活动状态（这不应该发生）。当你从地图上的位置点移开鼠标时，所有内容都应该返回到列表面板。

    $('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代码，我非常乐意听取。非常感谢！

- Jose

Answer 1

如果我理解正确，您可能想尝试使用鼠标离开事件 Mouseleave，并且我会使用模块化函数 toggleClass：

• ToggleClass函数Jquery

• Mouseleave解释：

  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');
  }
  },
  

我希望这可以对你有所帮助。祝好！

- Kouen

Answer 2

最终编辑：我在codepen上找到了一个更好的、更简单的解决方案。这是一个demo，可以正常工作。

我的问题在于上面的代码示例中$(this).off('mouseout');会在点击时移除mouseout。因此，如果你再次悬停在地图上的那个点上并且鼠标移出'tooltip'，它将保持活动状态，不会消失，但它应该消失。我找不到重新绑定它的方法，所以toggleClass()更好。我已经为此拔光了头发！

 $('.map__container span').click(function(mapIcon){
                    mapIcon.preventDefault();
                    var icon = $(this).attr('class');  
                    var panel = $(this).attr('class');  

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.panel.' + panel).addClass('clicked');
                    $('.location-title.' + icon).addClass('clicked');
                });                
                //Show bubbles over dots on map
                $('.map__container span').hover(function(){
                    var hoverdot = $(this).attr('class');

                    $('.location-title.' + hoverdot).toggleClass('selected');
                });
                //Show bubbles on hover over anchor links
                $('a.location').hover(function(){
                    var hoverlink = this.id;

                    $('.location-title.' + hoverlink).toggleClass('selected');
                });
                //Anchor links show panels and bubbles
                $('a.location').click(function(e){
                    e.preventDefault();
                    var panel = this.id;
                    var icon = this.id;

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.panel.' + panel).addClass('clicked');
                    $('.location-title.' + icon).addClass('clicked');                        
                });
                //back button
                $('.back-list').click(function(backButton) {
                     backButton.preventDefault();

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.list').addClass('clicked');                              
                });

- Jose