/* 封装的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. JPA 简单实体映射和EntityManagerAPI

    [常用注解] 使用JPA 指定映射关系时,有两种方式,一种是使用xml 方式,另一种是注解方式,笔者推荐使用注解方式.在JPA 映射简单实体时,常用的注解如下: @Entity:修饰实体类对象,表示该 ...

  2. 关于凑数问题的dfs

    https://www.nowcoder.com/acm/contest/42/F 首先由于是单一解问题,所以使用返回值类型为bool的dfs 然后为了保证dfs的效率性,应该把加数dfs放在前面,不 ...

  3. YUI JS压缩Ant脚本

    <?xml version="1.0" encoding="UTF-8"?><!-- 对指定目录下的所有js进行压缩,放入指定位置 --> ...

  4. tp5.1 错误 No input file specified.

    http://www.xxxx.com/admin/index/index 出现错误:No input file specified. 一.方法 与php版本有关  PHP版本5.6以上都会出现这个问 ...

  5. read()/fread()/mmap()执行效率对比

    一. read()/fread()/mmap()执行效率对比 系统调用read.c: #include <sys/types.h> #include <sys/stat.h> ...

  6. loopback v4 特性

    loopback 是一个api 服务框架,挺方便的,同时也已经演进了好几代了v4 有一些新功能的 支持 新特性 基于typescript/es2017 开发 openapi 驱动的rest api 开 ...

  7. Cocos2D-X2.2.3学习笔记13(延时动作)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/q269399361/article/details/28265477 还记得我们上一节讲的瞬时动作吗 ...

  8. kettle的输入输出组件和脚本组件

    一. 输入组件 1.1表输入 从指定的数据库中,通过sql语句来查询数据加载到内存. 允许简易转换:勾选后可以避免不必要的字段的数据类型转换,从而提高性能. 替换sql语句里的变量:勾选后可以通过${ ...

  9. Hyper-V 虚拟机连网

    参考:http://www.cnblogs.com/chenxizhang/p/3188005.html(个人推荐) 参考:http://blog.csdn.net/elvis_0123/articl ...

  10. 在doc下面执行zpl语言 Copy 文件名 lpt1

    在doc下面执行zpl语言 Copy 文件名 lpt1 测试斑马条码打印机并口是否能正常通讯: 1.Zebra打印机安装好标签和碳带,且打印机进入Ready状态.2.电脑端用Notepad编写输入如下 ...