/* 封装的TAP事件 */
(function () {
/**
* IOS 和 PC 端 只需要创建一次就能一直使用
* Android 手机 每次使用的时候都需要从新创建
*/
function createEvent() {
var myEvent = document.createEvent("HTMLEvents");
myEvent.initEvent("tap", true, true);
return myEvent;
}
var oldTime = null, newTime = null;
var startx, starty, endx, endy;
document.addEventListener("touchstart", function (ev) {
ev = ev || event;
oldTime = new Date().getTime();
startx = ev.changedTouches[0].clientX;
starty = ev.changedTouches[0].clientY;
});
document.addEventListener("touchend", function (ev) {
ev = ev || event;
newTime = new Date().getTime();
endx = ev.changedTouches[0].clientX;
endy = ev.changedTouches[0].clientY;
if(newTime - oldTime > 300) return;
if(Math.abs(startx - endx) > 10 || (Math.abs(starty - endy)) > 10) return;
ev.target.dispatchEvent(createEvent());
});
})();

HTML5 移动端 自定义点击事件的更多相关文章

  1. angularJS在移动端的点击事件延迟问题

    在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular- ...

  2. jquery关于移动端的点击事件解析

    jquery关于移动端的点击事件解析 如果用click来写 你连续点几下 会没有反应 响应是非常慢的 所以移动端必须用touchstart代替click来写

  3. 【技术博客】移动端的点击事件与Sticky Hover问题

    目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...

  4. ios移动端浏览器点击事件失效的解决方案

    点击事件失效的原因可能是因为,你用了事件代理了, 比如这样 $(document).on("click",".fd",function(){ }) 这段代码在安 ...

  5. Android 自定义View——自定义点击事件

    每个人手机上都有通讯录,这是毫无疑问的,我们通讯录上有一个控件,在通讯录的最左边有一列从”#”到”Z”的字母,我们通过滑动或点击指定的字母来确定联系人的位置,进而找到联系人.我们这一节就通过开发这个控 ...

  6. router-link 自定义点击事件

    <li v-for="(item, index) in menuList"> <router-link class="classify" ta ...

  7. Android——自定义多击事件

    一:使用场景 Android本身内置了点击.双击事件,但是某些时候,我们可能需要多击事件. 例如:某个秘密入口,为了避免用户误操作点击.双击到了触发开关而进入到不该被用户看到的页面,我们可以为入口控件 ...

  8. 移动端300ms点击事件的延迟

    移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...

  9. 移动端—— 兼容PC端,移动端的点击事件

    移动设备上不支持鼠标事件,好在webkit内核的移动浏览器支持 touch 事件,所以触摸事件是移动应用中所必须的.touchstart.touchmove.touchend事件可以类比于moused ...

随机推荐

  1. Tempter of the Bone dfs+剪枝

    The doggie found a bone in an ancient maze, which fascinated him a lot. However, when he picked it u ...

  2. Linux修改开机启动logo

    默认开机LOGO会在液晶屏的左上脚显示一只小企鹅,分辨率为80*80,具体在kernel/drivers/video/logo下会有logo_linux_clut224.ppm这幅图像,程序会根据这幅 ...

  3. day10 python学习 函数的嵌套命名空间作用域 三元运算 位置参数 默认参数 动态参数

    1.三元运算 #1.三元运算 利用已下方法就可以实现一步运算返回a b中大的值 def my_max(a,b): c=0 a=int(input('请输入')) b=int(input('请输入')) ...

  4. Oracle C#处理时间类型的Insert

    首先如果直接   parm.Value=DateTime.Now;   insert into table (TheTime)Value(@parm);   执行sql就会报错 ----------- ...

  5. es 之 Symbol

    ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...

  6. js 逻辑的短路运算

    && 与运算 同时为true,才为true: 表达式1为false,不用看表达式2: || 或运算 有一个为true,就为true: 表达式1为true,不用看表达式2: && ...

  7. ZedGraph 柱状图、饼图、折线图演示源码

    http://code1.okbase.net/codefile/ZedGraphControl.ContextMenu.cs_201211225626_97.htm // //This librar ...

  8. springMVC学习(3)-springMVC和mybatis整合

    一.需求:使用springmvc和mybatis完成商品列表查询. 二.整合思路:springMVC+mybaits的系统架构: 1步):整合dao层 mybatis和spring整合,通过sprin ...

  9. Response、Request、QueryString,修改,Cookies

    Response对象:响应请求Response.Write("<script>alert('添加成功!')</script>");Response.Redi ...

  10. VBA 对比两行数据

    Sub DB_Row() Dim i, j As Integer Dim row1, row2 As Integer row1 = ' 对比第 3 行 row2 = ' 和第 4 行 For i = ...