jQuery Mobile Slider 禁用點擊事件

在使用jQuery Mobile Slider時，發如今頁面上下拖動時，很容易不當心觸發Slider的點擊事件，從而形成誤操做。爲此須要禁用Slider的點擊事件。

官方API並無提供禁用點擊事件的事件的方法，所以要實現這一功能只能另闢蹊徑。留意到點擊Slider時都要觸發一個mousedown方法改變滑塊所處的位置，不妨重寫這個方法，在mousedown事件觸發時，保持原有的滑塊位置不變。

實現方法：

• 首先找到要操做的對象：

• 實現代碼：

 1  /***    控制滑塊任意位置點擊事件不可用 ***/
 2 function disableSliderTrack($slider) {
 3 
 4     $slider.bind("mousedown", function (event) {
 5 
 6         var x = event.pageX;
 7         var y = event.pageY;
 8 
 9         var $handle = $(this).find(".ui-slider-handle");
10 
11         var left = $handle.offset().left;
12         var right = left + $handle.outerWidth();
13         var top = $handle.offset().top;
14         var bottom = top + $handle.outerHeight();
15 
16         return (x >= left && x <= right && y >= top && y <= bottom);
17 
18     });
19 }

 

• 在頁面加載時初始化全部滑塊對象

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

 

至此大功告成。

條條大道通羅馬，經過重寫控件的mousedown方法也能實現對click事件的「禁用」。