[Javascript] Solve conflicts when using jQuery blockUI and datepicker

Image Credit

最近在開發專案的時候,因為大量用到 blockUI 及 datepicker,所以好死不死終於遇到了一個很神奇的 bug,這個 bug 會發生在你使用 modal dialog ,而該 dialog 內還包含一個 datepicker 的元素,這樣就會造成那個 datepicker 在選取年、月的下拉式選單(dropdown)時無法觸發。

但是這個很怪,沒有道理 DOM 都是正確的(年、月的 option 數目都是對的)但是卻打不開 dropdown,不過當我設定 option 內的 showOverlay 為 true 的時候,一切都正常了,因此判斷一切都和那個 showOverlay 的參數有關,所以去 Trace 了blockUI 的 source code ,最後終於發現了問題所在 …

https://gist.github.com/1058564.js?file=gistfile1.js

原來在 blockUI 運行的過程中,有這麼一段程式碼會綁定 mousedown / mouseup / keydown / keypress 的事件,這樣就會使得 datepicker 的點擊行為無法發生,這就是為什麼會有這個 bug 的出現。

所以目前比較好的做法,一個是設定 showOverlay : false (這會拿掉漸層背景,不過這通常都不會是我們想要的解法),另一個就是設定 bindEvents : false (讓 blockUI 不要 suppress 我們的點擊 event ),這樣就可以解決這個問題了。