你的位置:首页 > 软件开发 > 网页设计 > jQuery Mobile Slider 禁用点击事件

jQuery Mobile Slider 禁用点击事件

发布时间:2017-12-07 01:00:11
阿子原创,转载请注明出处。在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作。为此需要禁用Slider的点击事件。官方API并没有提供禁用点击事件的事件的方法,因此要实现这一功能只能另辟蹊径。留意到点击S ...

阿子原创,转载请注明出处。

在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作。为此需要禁用Slider的点击事件。

官方API并没有提供禁用点击事件的事件的方法,因此要实现这一功能只能另辟蹊径。

留意到点击Slider时都要触发一个mousedown方法改变滑块所处的位置,不妨重写这个方法,在mousedown事件触发时,保持原有的滑块位置不变。


实现方法

首先找到要操作的对象:
jQuery Mobile Slider 禁用点击事件

控制代码:

 /*** 控制滑块任意位置点击事件不可用**/
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事件的“禁用”。

原标题:jQuery Mobile Slider 禁用点击事件

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录