手机端的click
手机 click 端的
2023-09-11 14:22:24 时间
一:click事件的封装
手机端的click事件不是太好用,
1.点击会有延迟,
2.会出现一个灰色区域
就想到了用touch事件代替.
touch事件有touchstart,touchmove,touchend.
在使用的时候会有这样的一种情况.
现在我想在一个元素上使用touch实现单击.
意思就是当我的手点下去,在抬起来后触发事件.
如果我绑定touchstart肯定是不行的:手还没抬起,就触发了事件.
如果绑定touchend.会有一些不友好的体验.
比如:我的手在元素上滑动,然后抬起,就会触发这个事件.
很明显有些时候我们只需要类似于单击事件.这种手滑动后不需要触发的事件.
下面这个代码就是一个移动端的click事件.
(function(){ $.fn.touchClick=function(callback){ this.each(function(){ var obj=$(this); obj.on("touchstart",function(){ obj.data("move",false); }).on("touchmove",function(){ obj.data("move",true); }).on("touchend",function(event){ if(obj.data("move")){ return; }else{
if(typeof callback==="function"){
callback(obj,event);
} } obj.data("move",false); }); }); }; })(jQuery);
$("#div").touchClick(function(self,event){ self.hide(); });
二:移动端touch事件的跨页传递.
现在又A,B两个页面.上面各有一个元素#a,#b.在当前页面的同样位置.
$("#a").on("touchend",function(){ window.location.href="B.html"; });
$("#b").on("touchend",function(){ alert("B"); });
点击a之后直接跳转到B.html.但是诡异的是.触发了b元素的touch事件.
解决办法.
$("#a").on("touchend",function(){ window.location.href="B.html"; return false });
click事件有三个过程.手按下,手滑动,手抬起.
重新封装touchclick,使其可以出发这三个事件:
(function(){ var defaults={ start:function(self,event){}, move:function(self,event){}, end:function(self,event){} } $.fn.touchClick1=function(opts){ opts=$.extend({}, defaults,opts); this.each(function(){ var obj=$(this); obj.on("touchstart",function(event){ obj.data("move",false); return opts.start(obj,event); }).on("touchmove",function(event){ obj.data("move",true); return opts.move(obj,event); }).on("touchend",function(event){ if(obj.data("move")){ return; }else{ return opts.end(obj,event); } obj.data("move",false); }); }); }; })(jQuery);
上面的写法有个弊端,每次想访问当前对象的都得使用self.不太好。如果直接用this不是更好么。改写上面的代码
(function(){ var defaults={ start:function(self,event){}, move:function(self,event){}, end:function(self,event){} } $.fn.touchClick=function(opts){ if(typeof opts=="function"){ opts=$.extend({}, defaults,{end:opts}); }else{ opts=$.extend({}, defaults,opts); } this.each(function(){ var obj=$(this); obj.on("touchstart",function(event){ obj.data("move",false); opts.start.call(this,event); }).on("touchmove",function(event){ obj.data("move",true); opts.move.call(this,event); }).on("touchend",function(event){ if(obj.data("move")){ return; }else{ opts.end.call(this,event); } obj.data("move",false); }); }); }; })(jQuery);
相关文章
- 华为手机nova2s使用第三方字体库
- android 双卡手机发短信/判断手机是否为双卡
- opencv在手机上实现照片背景虚化
- 猎豹安全:A股“明家联合”造史上最强手机病毒
- 电脑和手机上常用apk或Pc软件的重要目录或文件或文件夹路径
- 逾2成手机用户不用手机打电话 使用聊天软件
- Unity 简单手机小游戏 - 3D重力滚球(文末源码)
- 凯立德手机导航APP全新升级 小长假结伴出行说走就走
- MuMu手机模拟器抓包实践
- 分布式爬虫系统设计、实现与实战:爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储
- 【fiddler学习问题记录】——手机端证书下载页打不开、无法将此证书安装(已解决)
- 手机回收调查:个人信息保护和环保是公众顾虑
- 电脑中的CAD图纸如何传到手机上查看?浩辰CAD看图王告诉你!
- 黑莓销售新设备 但这次不是手机而是雷达
- Fiddler实现手机抓包——小白入门