[jQuery] 事件處理技巧:Decide resize (and scroll)
![[jQuery] 事件處理技巧:Decide resize (and scroll)](https://s3-ap-northeast-1.amazonaws.com/zwh.zone/2017/07/001-1.png)
相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生,近期在開發 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
})