js触摸事件 应用在移动端 webkit内核都支持。

  触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

  事件:

  1.touchstart:  // 手指放到屏幕上的时候触发 
    2.touchmove:  // 手指在屏幕上移动的时候触发 
    3.touchend:  // 手指从屏幕上拿起的时候触发 
    4touchcancel:  // 没测试过  。系统取消touch事件的时候触发。至于系统什么时候会取消,不详

  

  ev.preventDefault(); //阻止默认事件  

经常在写给某个dom对象加了touch时间以后 写了 ev.preventDefault 还是 有滚动条。 所以给 document加上会阻止掉。

触摸时 阻止页面滚动   document.addEventListener("touchmove",function(e){  e.preventDefault(); },false);

触摸事件库  hammer.js    http://eightmedia.github.io/hammer.js/

  这个库支持很多手势。

  tap     drag   swipe  rotate

还自己定义了很多手势 比如  左滑动 swipeleft  右滑动 swiperight

var oCube = document.getElementById('viewport');

        var hammertime = Hammer(oCube).on("swipeleft", function(event) {

            alert('aa');
event.stopPropagation();
event.preventDefault(); });

  

js 触摸事件的更多相关文章

  1. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  2. 移动端JS 触摸事件基础

    一.手机上的触摸事件   基本事件:   touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 ...

  3. 移动端js触摸事件大全

    一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这 ...

  4. js触摸事件

    touch事件的绑定 电脑端的mouseDown,mouseUp,mouseMove分别对应移动端的touchstart,touchend,touchmove 下面的代码判断浏览器是电脑端还是移动端, ...

  5. js 触摸事件 touch

    //ban 为某div let startX = 0; ban.addEventListener("touchstart",function(){ //获取初始点击位置 start ...

  6. 移动web开发,12个触摸及多点触摸事件常用Js插件

    如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...

  7. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  8. ios实例开发精品文章推荐(8.12)11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  9. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

随机推荐

  1. Linux常用命令--网络管理篇(三)

    ping –b 10.0.0.255 扫描子网网段 ifconfig 查看网络信息 netconfig 配置网络,配置网络后用service network restart重新启动网络 ifconfi ...

  2. Oracle GoldenGate学习之Goldengate介绍

    Oracle GoldenGate学习之Goldengate介绍 (2012-10-02 17:07:27) 标签: 检查点 数据传输 队列 进程 分类: Goldengate Goldengate介 ...

  3. Java 处理json经常使用代码

    本project代码已上传至资源,如有须要,请自行下载. package com.michael; import static org.junit.Assert.assertEquals; impor ...

  4. Android @+id与@id的区别

      Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@ ...

  5. Java动态编程---动态代理

    java中动态编程用到的技术有:反射(动态代理),javassist和ASM,这几种动态编程方法相比较,在性能上Javassist高于反射,但低于ASM,因为Javassist增加了一层抽象.在实现成 ...

  6. jsp-forward跳转

    在Web中可以使用<jsp:forward>指令,将一个用户的请求(request)从一个页面传递到另一个页面,即完成跳转的操作. 1.调整前页:tiaozhuan_a.jsp 代码: & ...

  7. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  8. 0. chromium源代码分析 - 序

    本打算在CSDN写完这系列文字,却因为在CSDN中误删了一篇blog,该篇blog被移到了回收站.然而CSDN居然没有从回收站撤销删除的操作方法.联想到之前CSDN泄密的问题,其可靠性值得怀疑.随转向 ...

  9. 关于微信浏览不能URL传参,URL中的问号被删除

    关于微信浏览不能URL传参,URL中的问号被删除. 尼玛难道没有人遇到过这个问题?看了微信支付SDK3.0的代码,看到urlencode 看到了几次.实际上 在微信浏览器下 header('locat ...

  10. 尼康D5100使用设置及技巧,同样也适用尼康D5200

    尼康D5100使用设置及技巧,同样也适用尼康D5200,希望对新手能有点帮助. 一.设置 1.优化校准:可以在menu菜单中找到它,一般使用"标准"就可以,建议将"标准& ...