Question

我正在重新利用平滑滚动来锚定脚本，我的网站正在尝试练习响应式网页设计。我发现自己只需要在浏览器宽度大于900px时才能使用click事件。

$(function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            stuffHappens;
        });
    }
});

我也尝试使用窗口.resize函数，但结果非常错误。最终结果需要在加载时工作，并检查浏览器调整大小（如果需要启用或禁用）。建议？

$(window).resize(function() {
});

Answer 1

我认为你在寻找的是

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    </head>
    <body>
        <div class="clickme">Click Me</div>
    </body>
    <script>
        $(document).ready(function(){
            var handler = function(){
                console.log("clicked");
            };
            var $window = $(window);

            var setClickHandler = function(){
                if($window.width() > 900){
                    var registered = false;
                    var events = $(".clickme").data("events");
                    if(events){
                        var handlers = $(".clickme").data("events").click;
                        if(handlers){
                            $.each(handlers, function(index, e){
                                if(e.handler == handler){
                                    registered = true;
                                }
                            });
                        }
                    }
                    if(!registered){
                        $(".clickme").on("click", handler );
                    }
                } else {
                    $(".clickme").off("click", handler );
                }
            };

            setClickHandler();
            $window.on("resize", setClickHandler);
        });
    </script>
</html>

看起来并不复杂，但这是我能想到的最好的在这里，我们根据窗口宽度注册和取消注册处理程序。

另一个简单的解决方案是检查处理程序中的条件

            $(document).ready(function(){
            var handler = function(){
                if($window.width() > 900){
                    console.log("clicked");
                }
            };
            var $window = $(window);

            $(".clickme").on("click", handler );
        });

Answer 2

非常感谢@Conner提供jQuery resize function doesn't work on page load

的链接

使用该代码，我可以启动此脚本，以便在单击时平滑滚动到任何文章元素，但前提是窗口宽度大于900！完美。

onResize = function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            var $myPos = $(this);

            $('html, body').stop().animate({
                scrollLeft: $($myPos).offset().left -0
            }, 500, 'easeInOutExpo');
            event.preventDefault();
        });
    }
    else{
        $('article').unbind('click');
    }
}

jQuery Window在具有.bind单击功能时调整大小

2 个答案: