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