Click事件可防止mouseout触发

Question

最后编辑：我发现了一个更好的解决方案，并在此更简单codepen 。 工作功能的演示 。

编辑：我发现bug来自哪里你可以在这里看到一个例子。 当您单击时，可以说“关于”选项卡并将鼠标悬停在联系人上，应隐藏内容。 但是你回过头来盘旋，内容保持可见，但事实并非如此。 如何确保单击后触发mouseout事件？

编辑2：所以我注意到unbind（）方法阻止了这一点。 当我删除它时，我似乎无法让内容区域在单击时保持活动状态，因为mouseout方法会覆盖它。

我对此做了一些研究，但无法找到解决方案，为什么在悬停时删除类不起作用。 我遇到了addClass（）和removeClass（）函数的错误。 问题是我有这些功能在悬停或鼠标悬停/鼠标移动和点击时触发，所以它有点令人困惑。 这是我正在使用的演示： 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，我会全力以赴。 非常感谢！

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

我希望这会对你有所帮助 。 敬礼！

Answer 2

最后编辑：我发现了一个更好的解决方案，并在此更简单codepen 。 工作功能的演示 。

我的问题是在$(this).off('mouseout');上面的代码示例中$(this).off('mouseout'); 点击时删除了mouseout。 因此，如果你要回到地图上的那个点并且鼠标移开'工具提示'将保持活动状态，它将不会在鼠标输出时消失，它应该消失。 我找不到再次绑定它的方法，所以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');                              
                });