具有 .bind 点击功能的 jQuery 窗口调整大小答案

【问题标题】：jQuery Window Resize while having a .bind click function具有 .bind 点击功能的 jQuery 窗口调整大小
【发布时间】：2012-07-03 02:44:17
【问题描述】：

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

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

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

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

【问题讨论】：

这个答案的副本：stackoverflow.com/questions/2597152/…
所以你希望点击事件只有在窗口大小 > 900 时才起作用？

标签： jquery syntax if-statement window-resize

【解决方案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>

它看起来有点复杂，但这是我能想到的最好的。
这里我们根据窗口宽度注册和注销handler。

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

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

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

【讨论】：

抱歉 Arun，我无法让该脚本运行。但我确实找到了康纳在上面发布的解决方案，并将我使用的完整答案放在这里。不过，我非常感谢您花时间帮助我解决这个问题！

【解决方案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');
    }
}

【讨论】：