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事件的“禁用”。

更多专业前端知识，请上 【猿2048】www.mk2048.com