[jQuery] 事件處理技巧:Decide resize (and scroll)

相信大家對 jQuery 的 resizescroll 等事件並不陌生,近期在開發 jQuery Plugin 時 , 碰到一個問題 , 我需要在 resize 事件發生時 , 針對 視窗的 放大縮小 , 執行不同的 method 與 event

這類的需求,其實是非常常見的,像是 scroll 事件中,只針對滾輪在 往上 滾動時,讓隱藏的選單出現於畫面中,就是我們在使用網頁的使用者體驗中,最常見的例子:


作法 :

此部份我以 resize 事件為範例, 同邏輯 scroll 事件也適用下列方法

範例:

(function($){

    var previousDimensions = {
      width: $(window).width(),
      height: $(window).height()
    }

    $(window).resize(function () {
      var newDimensions = {
        width: $(window).width(),
        height: $(window).height()
      }

      if (newDimensions.width > previousDimensions.width) {

          // resize UP event
          console.log('UP')

       } else {

          // resize Down event
          console.log('DOWN')

       }

      previousDimensions = newDimensions

    })
})(jQuery)

解析:

Step 1 :

建立變數,暫存 當前 屬性質 , 作為判斷依據

var previousDimensions = {
  width: $(window).width(),
  height: $(window).height()
}

Step 2 :

在 事件(resize) 發生後,建立變數取得 事件後的 屬性質

$(window).resize(function () {
  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }
})

Step 3 :

接著就可以根據前 2 步驟 的參數,進行判斷 視窗的 放大縮小,並執行對應的 事件 與 方法

$(window).resize(function () {

  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }

  if (newDimensions.width > previousDimensions.width) {

      // resize UP event
      console.log('UP')

   } else {

      // resize Down event
      console.log('DOWN')

   }
})

Step 4 :

最後在 事件(resize) 結束後,更新 Step 1 作為判斷依據的參數

$(window).resize(function () {

  var newDimensions = {
    width: $(window).width(),
    height: $(window).height()
  }

  if (newDimensions.width > previousDimensions.width) {

      // resize UP event
      console.log('UP')

   } else {

      // resize Down event
      console.log('DOWN')

   }

  //更新參考依據
   previousDimensions = newDimensions
})

Facebook 功能: