手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果
在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果
/*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/
function doTouchPublic(id){
setTimeout(function(){
var obj=document.getElementById(id);
touchPublic.tagUltagDiv(obj);
},300);
};
var touchPublic={
tagUltagDiv:function(obj){
var objAll;
/*如果对象为UL,那么给LI添加事件,否则给DIV当前对象添加事件*/
if(obj.tagName=="UL"){
objAll=obj.childNodes;
}else{
objAll=obj;
}
touchPublic.touchMoveEndIf(objAll);
},
/*li做委托事件,on为JQ中委托事件*/
touchMoveEndIf:function(obj){ $(obj).on('touchstart',function(){
touchPublic.touchObjstart(this,"objRowOver");
})
/*触摸滑动,e.preventDefault();是为了让end触发*/
$(obj).on('touchmove',function(){
touchPublic.touchObjend(this,"objRowOver");
});
/*触摸离开*/
$(obj).on('touchend',function(){
touchPublic.touchObjend(this,"objRowOver");
}); },
touchObjstart:function(that,color){
$(that).addClass(color);
},
touchObjend:function(that,color){
if($(that).attr('class')==color){
$(that).removeClass(color);
}
}
}
手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果的更多相关文章
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- touchstart,touchmove,touchend事件 写法
jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...
- touchstart和touchend事件
touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需 ...
- 获取touchstart,touchmove,touchend 坐标
简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...
- touchstart,touchmove,touchend触摸事件的小小实践心得
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- 移动端touchstart,touchmove,touchend
近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...
- js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...
- 手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- (转)手机端html5触屏事件(touch事件)
本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...
随机推荐
- struts2 复杂参数封装
1.1.1 Struts2中封装复杂类型的数据: 封装到List集合: 页面: 商品名称:<input type="text" name="products[ ...
- ACM/ICPC 之 四道MST-Prim解法(POJ1258-POJ1751-POJ2349-POJ3026)
四道MST,适合Prim解法,也可以作为MST练习题. 题意包括在代码中. POJ1258-Agri Net 水题 //Prim-没什么好说的 //接受一个邻接矩阵,求MST //Time:0Ms M ...
- 6.js模式-中介者模式
1. 中介者模式 所有对象通过中介者进行通信 var playDirector = (function(){ var players = []; var options = {}; options.a ...
- Tesseract-OCR text2image.exe [ x86 支持 XP ]
Tesseract-OCR 工具中的 text2image.exe ,下载其他人编译的在 win 系统都无法正常运行. 折腾了好久终于编译出能正常运行的. --font="font name ...
- Java for LeetCode 230 Kth Smallest Element in a BST
解题思路: 直接修改中序遍历函数即可,JAVA实现如下: int res = 0; int k = 0; public int kthSmallest(TreeNode root, int k) { ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
- Bundle savedInstanceState的作用
写过Android程序的都知道Activity中有一个名称叫onCreate的方法.该方法是在Activity创建时被系统调用,是一个Activity生命周期的开始.可是有一点容易被忽视,就是onCr ...
- Debian8.3.0下安装Odoo8.0步骤
Debian8.3.0下安装Odoo8.0的方法 假设你已经安装好了Debian 系统,使用root帐号执行如下命令 # apt-get update && apt-get upgra ...
- Struts2防止表单重复提交
1.说明 系统拦截器的应用. 表单重复提交:当使用请求转化进行跳转的时候,存在着表单重复提交的问题. 2.在表单中加入s:token 如果页面加入了struts2的标签,页面的请求必须进入struts ...
- 模拟赛1101d1
完美的序列(sequence)Time Limit:1000ms Memory Limit:64MB题目描述LYK 认为一个完美的序列要满足这样的条件:对于任意两个位置上的数都不相同.然而并不是所有的 ...