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. Repeat Number

    Problem B: Repeat Number Time Limit: 1 Sec  Memory Limit: 32 MB Description Definition: a+b = c, if ...

  2. MVC自学第四课

    处理表单 前面的列子我们已经把表单提交给了HomeControllers类中的RsvpForm动作方法,只是在这个动作方法内,我们并没有做什么具体的逻辑处理,而是直接返回一个 “Thanks”的视图. ...

  3. Linux中的网络

    在windows 中表示一张网卡用本地连接1,本地连接2这种方式来表示:而在linux 中用的是etho,eth1 等等这样的东西来表示的.

  4. linux 环境操作faq 记录

    1. ubuntu adb 提示???? 找不到设备 这个问题不是一次两次了记录下,以后好找点. 问题:ubuntu下adb 不是别设备 http://blog.csdn.net/chychc/art ...

  5. Debug程序无法运行解决

    说明:文章内容部分参考网络上的解决思路. 在没有安装Microsoft Visual Studio的系统上,Debug版本无法正常运行.这是由于缺少vs运行时库引起的. 以vs2005为例.开发机用v ...

  6. 微信token认证方法原理

    var http = require('http'); var url = require("url"); var crypto = require("crypto&qu ...

  7. javascript数组去重算法-----5

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. c#读取xml文件配置文件Winform及WebForm-Demo具体解释

    我这里用Winform和WebForm两种为例说明怎样操作xml文档来作为配置文件进行读取操作. 1.新建一个类,命名为"SystemConfig.cs".代码例如以下: < ...

  9. 单例模式 GetInstance()

    如何设计一个含GetInstance()函数的类 直接上代码: 头文件(MyClass.h): class CMyClass { public: CMyClass(void); ~CMyClass(v ...

  10. 20141014C#面向对象抽象方法,抽象类,接口

    里氏代换原则.可以用子类的对象替代父类的对象. 抽象依赖原则.依赖——形参,关联 一.抽象方法: 在一些父类中,某些行为不是非常明确,因此无法用代码来具体实现,但是类必须具备此方法,因此把这样的方法定 ...