/* 封装的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. MySQL--区分表名大小写

    ============================================================================ 在MySQL中,可以通过lower_case_ ...

  2. x86函数调用约定

    以下摘自<IDA Pro>,貌似有一些细节之处没有交代清楚呢,需要进一步思考.实践. 了解栈帧的基本概念后,接下来详细介绍它们的结构.下面的例子涉及x86体系结构和与常见的x86编译器(如 ...

  3. FastAdmin 插件的 Git 开发流程(简明)

    FastAdmin 插件的 Git 开发流程(简明) cms zip 安装 包安装 删除 addons 里的 cms 使用 mklink 软链接到 cms 插件 Git 仓库 修改 cms 插件 gi ...

  4. linux挂载SD卡

    (1)通过#fdisk -l命令确认板子上的linux系统是否识别SD卡 MP805M板子插入SD卡后显示 SD30 slot is without WPmmc1: new high speed SD ...

  5. AtomicStampedReference、AtomicMarkableReference 区别

    AtomicMarkableReference 描述的是更加简单的是与否的关系,它的定义就是将数据变换为true 或 false,通常ABA问题只有两种状态,AtomicMarkableReferen ...

  6. websocket小体验

    http://www.cnblogs.com/GoodHelper/p/7078381.html https://segmentfault.com/a/1190000012084213

  7. 【Android】Android版本和API Level对应关系

    API Level Notes Android 4.4 19 KITKAT Platform Highlights Android 4.3 18 JELLY_BEAN_MR2 Platform Hig ...

  8. 一个多maven项目聚合的实例

    本文转载自:http://my.oschina.net/xuqiang/blog/99854 本文介绍一个多maven项目的实例demo,展示了聚合.继承.工程依赖.单元测试.多war聚合.cargo ...

  9. 【比特币】通过dns seeds获取节点列表数据

    通过dns seeds获取节点列表数据 dns seed是什么 返回比特币网络上完整节点IP地址的DNS服务器,用于协助发现节点. 哪里可以查看到 我们在bitcoinj库中,params文件夹内为网 ...

  10. Java学习——Eclipse下载,java配置,新建,输入输出

    Eclipse下载,java配置:  基本的软件是JDK,它可以编译.运行Java程序,下载地址是:https://www.oracle.com/technetwork/java/javase/dow ...