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

官方API并从未提供禁用点击事件的事件的艺术,由此要促成这一效益只好另辟蹊径。留意到点击Slider时都要接触一个mousedown方法改变滑块所处的职务,不妨重写这个主意,在mousedown事件触发时,保持原有的滑块地方不变。

心想事成格局:

  • 首先找到要操作的目的:

图片 1

  • 贯彻代码:

    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 });

 

迄今大功告成。

规章大道通休斯敦(Houston),通过重写控件的mousedown方法也能兑现对click事件的“禁用”。

相关文章

网站地图xml地图