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點擊功能

回答

相關問題