var ele =  document.getElementsByClassName('target_node_class')[0]
//may have x and y properties in some browsers,But it always has left, top, right, and bottom properties.
var rect = ele.getBoundingClientRect();
var touch = new Touch({
"identifier" : 0,
"target" : ele,
"clientX" : (rect.left + rect.right)/2,
"clientY" : (rect.top + rect.bottom)/2,
"screenX" : (rect.left + rect.right)/2,
"screenY" : (rect.top + rect.bottom)/2,
"pageX" : (rect.left + rect.right)/2,
"pageY" : (rect.top + rect.bottom)/2,
"radiusX" : 11.5,
"radiusY" : 11.5,
"rotationAngle" : 0.0,
"force" : 1}); var touchstart = new TouchEvent("touchstart", {
cancelable: true,
bubbles: true,
composed: true,
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
}); var touchend = new TouchEvent("touchend", {
cancelable: true,
bubbles: true,
composed: true,
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
}); ele.dispatchEvent(touchstart);
ele.dispatchEvent(touchend);

相关WebAPI

Touch: https://developer.mozilla.org/en-US/docs/Web/API/Touch/Touch

TouchEvent: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/TouchEvent

stackoverflow上类似的问题:https://stackoverflow.com/questions/29018151/how-do-i-programmatically-create-a-touchevent-in-chrome-41/42447620

JS模拟Touch事件的更多相关文章

  1. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  2. js的Touch事件

    js的touch事件,一般用于移动端的触屏滑动$(function(){document.addEventListener("touchmove", _touch, false); ...

  3. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  4. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  5. zepto.js 处理Touch事件(实例)

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  6. zepto.js 处理Touch事件

    处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...

  7. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  8. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  9. js 用touch事件实现简单tap

    function _tap(dom,callBack){ var startTime=0; var delayTime=200; var isMove=false; dom.addEventListe ...

随机推荐

  1. window service 批处理安装/卸载命令

    开启服务 @echo.服务启动...... @echo off @sc create 服务名 binPath= "C:\Users\Administrator\Desktop\win32sr ...

  2. Java实现 Cookie的生成与读取

    今天学习的时候发现Cookie挺有意思的,就自己网上找点例子,自己敲点代码熟练下,现在就记录下来,分享一下. 什么是cookie?? Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服 ...

  3. macro 标签,和静态文件,以及templates

    1 模板 -Templates 1 什么是模板 模板,在Flask中就是允许响应给用户看的网页在模板中,允许包含“占位变量”来表示动态的内容 模板最终也会被解析成字符串再响应给客户端,这一过程通常称为 ...

  4. javaweb的maven项目结构

    本来准备看javaweb的项目结构,因为之前自己建maven的项目结构,总是各种出错,后来干脆用maven自己携带的项目结构. 一个最基本的web目录结构如下,红框部分为必须有的,其他的随意. 这是一 ...

  5. uni-app之tabBar的自己配置

    1.因为产品相关的的权限,需要配置不同的导航,这时候需要自定义导航.分离出来的就是一个小的组件.(tabBar.vue) 此处暂时用的html插入的代码,能粘贴到vue文件即可. <templa ...

  6. duilib学习领悟(3)

    世上本无窗口,窗口只是人的眼睛和电脑屏幕及鼠标键盘相互操作后的视觉效果! 下面我们来看看我们之前讲过的代码: class CDuiFrameWnd : public CWindowWnd, publi ...

  7. airflow--调度研究

    1.从调度到airflow ETL,是英文 Extract,Transform,Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端 ...

  8. django -过滤器的使用

    前情提要: 最近工作中用到django 中的  自定制过滤器的内容, 再此 复习一波过滤器和自定制 过滤器的内容 自定制过滤器   1.在settings中的INSTALLED_APPS配置当前app ...

  9. Chrome浏览器设置自动启用Flash插件

    Chrome浏览器设置自动启用Flash插件   1.打开Chrome浏览器,输入chrome://flags/#run-all-flash-in-allow-mode,打开,找到Enable Eph ...

  10. IO 的底层实现问题

    最近在看 JAVA NIO 的相关知识,了解一下IO的底层实现原理. IO涉及到的底层的概念大致如下: 1) 缓冲区操作.2) 内核空间与用户空间.3) 虚拟内存.4) 分页技术. 一,虚拟存储器 虚 ...