뷰포트의 크기에 따라 jQuery 클릭 및 호버 이벤트 사용

Question

20 개의 이미지가있는 간단한 방문 페이지가 있습니다. 뷰포트가 992px보다 큰 경우 모든 단일 이미지에서 jQuery 이벤트를 가져와야하며 뷰포트가 992px보다 작은 경우 다른 이미지를 표시하려면 jQuery 이벤트를 클릭해야합니다. 같은 문제를 다루는 몇 가지 질문을 읽었습니다.

if(w < 992){ 

    $('#01').on('click', function(){ 
    $('#riv-01').fadeIn('fast'); 
    $('.overlay').fadeIn('fast'); 
    }); 

    ... 

    }else{ 

    $('#01').hover(
    function() { 
    $('#riv-01').fadeIn('fast'); 
    },function() { 
    $('#riv-01').fadeOut('fast'); 
    } 
); 

    } 

하지만 브라우저 창보다 큰 992, 예를 들어, 크기를 조정하고 때 992 미만이 될 호버 효과가 실행됩니다 나는이 방법을 설정합니다.

내가와 뷰포트의 폭을 얻을 :

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 

및 크기 조정 이벤트가 발생할 때 승 업데이트 :

var resizeId; 


    function resizingDone() { 
    w = Math.max(document.documentElement.clientWidth, window.innerWidth ||  0); 
    console.log(w); 
    } 

    $(window).resize(function() { 
    clearTimeout(resizeId); 
    resizeId = setTimeout(resizingDone, 500); 
    }); 

어디 내가 잘못?

감사합니다.

Answer 1

창이 축소되면 이벤트를 분리해야합니다.

var resizeId; 

function resizingDone() { 
    w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
    console.log(w); 
    if (w < 992) { 
    $('#01').on('click', function() { 
     console.log('click'); 
    }); 
    $('#01').off('hover'); 
    } else { 
    $('#01').off('click'); 
    $('#01').hover(function() { 
     console.log('hover'); 
    }); 
    } 
} 

$(window).resize(function() { 
    clearTimeout(resizeId); 
    resizeId = setTimeout(resizingDone, 500); 
}); 

resizingDone(); 

https://jsfiddle.net/Loy9cLcm/

JQuery와 문서에 대해 :.. 가져 .off()