jQuery Mobile Slider 禁用点击事件
博客专区 > wen1512 的博客 > 博客详情
jQuery Mobile Slider 禁用点击事件
wen1512 发表于12个月前
jQuery Mobile Slider 禁用点击事件
  • 发表于 12个月前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 38
码字总数 32057
×
wen1512
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: