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. CSS自学笔记(6):CSS的模型

    CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. 图片来源:w3school.com.cn 元素(element)是一个html文档的实际内容区域,依次由 ...

  2. material风格的日期/时间选择:SublimePicker

    介绍: 一个material风格的view,提供了各种关于日期选择的功能,可以选择日期,选择时间,选择重复次数等,可以在不离开选择器的情况下在不同的选择界面间切换.其实这些功能是从5.0的日历中抠出来 ...

  3. sql like 通配符 模糊查询技巧及特殊字符

    最近碰到like模糊匹配的问题,找到一些答案接触迷惑,觉得有知识是自己忽略的,现在整理出来,既强化记忆,又是一次记录,以下转自一篇Blog,关于sql server like的通配符和字符带通配符的处 ...

  4. c++ 关于类构造函数的初始化列表

    除了性能问题之外,有些时场合初始化列表是不可或缺的,以下几种情况时必须使用初始化列表 常量成员,因为常量只能初始化不能赋值,所以必须放在初始化列表里面 引用类型,引用必须在定义的时候初始化,并且不能重 ...

  5. Puppet的执行过程

    图1 Puppet工作流程 1. 客户端Puppetd向Master发起认证请求,或使用带签名的证书. 2. Master告诉Client你是合法的. 3. 客户端Puppetd调用Facter,Fa ...

  6. oracle job 定时执行 存储过程

    oracle job 定时执行 存储过程   一:简单测试job的创建过程案例: 1,先创建一张JOB_TEST表,字段为a 日期格式 SQL> create table JOB_TEST(a ...

  7. 【转】python import的用法

    [转自http://blog.sina.com.cn/s/blog_4b5039210100ennq.html] 在python用import或者from...import来导入相应的模块.模块其实就 ...

  8. java--jsp+ssh+select动态结合数据和选择(解)

    在三层体系结构和jsp合并项目,如何实现select动态绑定数据和动态选择指定的行?让我们来看看下面的: 1.首先定义一个Bean分类.它用于实例select的结合数据中的每一个id和name: pu ...

  9. Android TXT文件读写

    package com.wirelessqa.helper; import java.io.FileInputStream; import java.io.FileOutputStream; impo ...

  10. [MOC062066]背景建模资料收集整理

    一.相关博客 背景建模相关资料收集,各个链接都已给出. 资料,不可能非常完整,以后不定期更新. -----------------切割线----------------- 这个哥们总结的非常好啊,看完 ...