Entfernen mouseenter Funktion jquery on bei Fenstergröße

Question

Ich habe zwei verschiedene Funktionen, die ich je nach Bildschirmgröße triggern. Die Desktop-Funktion bedeutet, dass beim Bewegen des Mauszeigers über ein Element eine Animation stattfindet.

Auf Mobilgeräten erfolgt die Animation, wenn Sie auf das Element klicken. Das Problem ist, wenn ich die Größe eines Desktops auf ein Handy ändere, bleibt der Hover/Mouseenter-Effekt erhalten. Weiß jemand, wie ich den Hover/Mouseenter entfernen kann, wenn die Größe des Bildschirms geändert wird.

Derzeit sieht mein Code wie folgt aus.

var isMobile = isMob(); 

function isMob() { 
    if($(window).width() > 1000) { 
     return false; 
    } 
    return true; 
} 

$(window).resize(function() { 
    $('.hover-zone').css('display', 'block'); 
    isMobile = isMob(); 
    if(isMobile){ 
     mobileAnimate(); 
    } 
    if(!isMobile){ 
     deskTopAnimate(); 
    } 
}); 

if(isMobile){ 
    mobileAnimate(); 
} 

if(!isMobile){ 
    deskTopAnimate(); 
} 

function deskTopAnimate() { 
    $('.hover-zone').mouseenter(function(){ 
     desktopAnimateOut.play(); 
    }); 

    $('.desktop-close').click(function(){ 
     desktopAnimateOut.reverse(); 
    }) 
} 

function mobileAnimate() { 
    //current attempt to prevent 
    $('.hover-zone').mouseenter(function(){ 
     return; 
    }) 
    $('.hover-zone').click(function(){ 
     animateOut.play(); 
    }); 

    $('.mobile-close').click(function(){ 
     animateOut.reverse(); 
    }) 
} 

Answer 1

Ändern Sie das mobile Teil damit;

function mobileAnimate() { 
    //current attempt to prevent 
    $('.hover-zone').off('mouseenter'); // removes the bind 
    $('.hover-zone').click(function(){ 
     animateOut.play(); 
    }); 

    $('.mobile-close').click(function(){ 
     animateOut.reverse(); 
    }) 
} 

Wenn das nicht funktioniert, versuchen Sie es;

$(document).off('mouseenter','.hover-zone');