jQuery Mobile Slider 禁用點擊事件

阿子原創，轉載請註明出處。

在使用jQuery Mobile Slider時，發現在頁面上下拖動時，很容易不小心觸發Slider的點擊事件，從而造成誤操作。為此需要禁用Slider的點擊事件。

官方API並沒有提供禁用點擊事件的事件的方法，因此要實現這一功能只能另闢蹊徑。

留意到點擊Slider時都要觸發一個mousedown方法改變滑塊所處的位置，不妨重寫這個方法，在mousedown事件觸發時，保持原有的滑塊位置不變。

實現方法

首先找到要操作的對象：

控制代碼：

 /***    控制滑塊任意位置點擊事件不可用**/
function disableSliderTrack($slider) {
    $slider.bind("mousedown", function (event) {
        var x = event.pageX;
        var y = event.pageY;
        var $handle = $(this).find(".ui-slider-handle");
        var left = $handle.offset().left;
        var right = left + $handle.outerWidth();
        var top = $handle.offset().top;
        var bottom = top + $handle.outerHeight();
        return (x >= left && x <= right && y >= top && y <= bottom);
    });
}

在頁面載入時初始化所有滑塊對象

$(function(){            
      disableSliderTrack($(".ui-slider-track"));
});

至此大功告成。條條大道通羅馬，通過重寫控制項的mousedown方法也能實現對click事件的“禁用”。