jQuery窗口调整大小，同时具有.bind点击功能

我重新调整了平滑滚动到锚脚本，我的网站正在尝试练习响应式网页设计。我发现自己需要让浏览器的宽度大于900px时才能使用click事件。jQuery窗口调整大小，同时具有.bind点击功能

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

我也尝试过使用窗口.resize函数，但结果相当麻烦。最终结果需要加载，并检查浏览器调整大小（以防需要启用或禁用）。建议？

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

来源

2012-07-03 Joe Wroten

重复这个答案：http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load – Conner

什么问题吗？ – undefined

所以你希望点击事件只有在窗口大小> 900时才能使用？ –

我想你正在寻找的是

<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-03 03:39:53

对不起Arun我无法让脚本工作。但是我确实找到了上面Conner发布的解决方案，并将我在此使用的完整答案放在了上面。我真的很感谢你的时间，试图帮助我解决这个问题！ –

谢谢你这么多@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'); 
    } 
}

来源

2012-07-06 02:20:22

jQuery窗口调整大小，同时具有.bind点击功能

回答

相关问题