javascript - jQuery 响应式悬停和点击切换

Question

窗口大小变化时如何切换悬停和点击

function checkWidth() {
var windowsize = $window.width();
    if (windowsize > 480) {
        $('#clickPoint').on('click', function(){
        ......//code
        });
    }else {
        $('#clickPoint').on('hover',function(){
        ......//code        
        });
    }
}();

$(window).resize(checkWidth);

但是我发现悬停始终处于打开状态，所以我不得不更改为这种方式

var windowsize = $window.width();
        if (windowsize > 480) {
            $('#clickPoint').on('click', function(){
            ......//code
            });
        }else {
           $('#clickPoint').off('click', function(){
            ......//code
            });
            $('#clickPoint').on('hover',function(){
            ......//code        
            });
        }
    }();

但是还是不能正常工作，请问有人有更好的解决方案吗？谢谢

Answer 1

仔细看看$window.width()。我怀疑是这样。尝试将其更改为 $(window).width()。更改您在顶部提供的代码。因为底部的代码看起来很乱。

还要确保使用警报或日志检查窗口宽度。只是为了确保 if 语句正常工作。