點擊事件防止鼠標觸發

FINAL編輯：我發現了一個更好的解決方案，並在這codepen更簡單。一個demo的工作功能。點擊事件防止鼠標觸發

編輯：我發現錯誤來自哪裏你可以看到一個例子here。當你點擊可以說關於選項卡，並懸停在聯繫人的內容應隱藏。但是你回過頭來關注並關掉內容保持可見狀態，但事實並非如此。如何確保單擊後觸發鼠標事件？

編輯2：所以我注意到unbind（）方法阻止了這一點。當我刪除它時，我似乎無法使內容區域在點擊時保持活動狀態，因爲mouseout方法會覆蓋它。

我做了一些研究，但無法找到解決方案，爲什麼懸停removeclass不起作用。我遇到了addClass（）和removeClass（）函數的一個bug。事情是我有這些函數觸發懸停或mouseover/mouseout和點擊，所以它有點混亂。以下是我正在使用的演示：JSFiddle。

Full screen爲更好的看法。

我的JavaScript可種混亂，但最終這是假設的方式來工作：

如果你將鼠標懸停在一個點在地圖上留下紅色框中的內容就應該揭示了什麼是相關位置以及位置名稱的「工具提示」。（這部分工作）

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我都聽過。非常感謝！

來源

2015-10-23 Jose

如果我理解正確的，你可能想嘗試與事件鼠標離開了，我會用模塊化的功能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'); 
} 
},

我希望這個可以幫助你。敬禮！

來源

2015-10-25 20:20:06 Kouen

FINAL編輯：我找到了一個更好的解決方案，並在這codepen更簡單。一個demo的工作功能。

我的問題是在$(this).off('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');        
       });

來源

2015-10-27 16:16:55 Jose

點擊事件防止鼠標觸發

回答

相關問題