文档章节

jQuery Mobile Slider 禁用点击事件

wen1512
 wen1512
发布于 2017/04/25 10:44
字数 273
阅读 26
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
wen1512
粉丝 1
博文 38
码字总数 32057
作品 0
大庆
高级程序员
私信 提问
21 个有用的 jQuery 教程和插件

jQuery 是最火热的 Ajax 框架,在互联网网站到处都有 jQuery 的身影。本文给出一些例子和教程帮你更好的使用 jQuery 开发出漂亮的 Web 应用。 Photobooth with PHP, jQuery and CSS3 ( Demo ...

红薯
2011/04/28
6.1K
9
28 个很有用的 JQuery Sliders 插件

SlideDeck jQuery plugin SlideDeck Lite 是 SlideDeck Pro 的功能限制版本。很专业。 Automatic Image Slider w/ CSS & jQuery Quicksand Move Elements with Style Nivo – A new jQuery i......

小编辑
2011/09/02
3K
3
2014年140个最好的jQuery插件集合

Material Design Preloader Want to create a Google’s latest Material Design look-alike pre-loader? If yes, this jQuery plugin created by Aaron Lumsden will help you do so and y......

IanSun
2015/03/14
0
0
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
427
0
60款很酷的 jQuery 幻灯片演示和下载

转自:http://www.cnblogs.com/lhb25/archive/2011/05/31/2056103.html jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入...

hoojo
2013/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
22分钟前
1
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
26分钟前
0
0
阿里巴巴智能监控新场景的探索

摘要: 智能监控是智能运维的子领域,详细分析。 作者简介 王肇刚 阿里巴巴全球运行指挥中心高级技术专家 智能监控是智能运维的子领域,我们说的监控,探讨的更多是在监控策略,因为可能从数...

阿里云官方博客
29分钟前
1
0
【双十二】12 月 12 日 12 点 12 分限量抢福利,云计算不剁手!

活动详情 1.首充豪礼 双十二当日,新用户首充 200 元送 200 元代金券!仅限前 88 名!先到先得!拼手速!(新用户指 12 月 12 日前已完成注册但从未充值过的用户)
 2.超值返券 双十二当日,...

七牛云
54分钟前
3
0
Calculate Linux 发布 18 LXQt是基于Gentoo的发行版

导读 Calculate Linux 是一个基于 Gentoo 并与 Gentoo 完全兼容的滚动更新发行版家族,专为企业环境下的快速部署而优化。其提供多个不同的分支版本,分别适用于桌面、服务器等应用场景。该项...

问题终结者
57分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部