0

我将平滑滚动重新用于锚定脚本，并且我的网站正在尝试练习响应式网页设计。当浏览器宽度大于 900 像素时，我发现自己需要仅单击事件功能。

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

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

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

2 回答 2

0

非常感谢@Conner 指向jQuery 调整大小功能的链接在页面加载时不起作用

使用该代码，我能够启动此脚本，以便在单击时平滑滚动到任何文章元素，但前提是窗口宽度大于 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');
    }
}
于 2012-07-06T02:20:22.853 回答
0

我想你正在寻找的是

<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 );
        });
于 2012-07-03T03:39:53.793 回答