文档章节

HTML5之触摸事件(touchstart、touchmove和touchend)

豆豆麻麻
 豆豆麻麻
发布于 2016/05/23 15:00
字数 94
阅读 27
收藏 0
点赞 2
评论 0
item_list = $('#incomeStatement')[0];//要加载的块
item_list.addEventListener('touchstart', touchstart, false);
item_list.addEventListener('touchmove', touchmove, false);
item_list.addEventListener('touchend', touchend, false);
function touchstart(e) {
        touch_start_y = e.changedTouches[0].clientY;
    }

    function touchmove(e) {
        //上拉到顶
        if($(document).scrollTop() <0){
            if (e.changedTouches[0].clientY > touch_start_y) {
                var change = e.changedTouches[0].clientY - touch_start_y;
//                    e.preventDefault();
            }
        }
        //下拉到底
        else if($(document).scrollTop() >= $(document).height() - $(window).height()){
            if (e.changedTouches[0].clientY < touch_start_y) {
                var change = touch_start_y - e.changedTouches[0].clientY;
                //加载数据
                init_income_statement();
//                    e.preventDefault();
            }
        }
    }

    function touchend(e) {
        touch_start_y = -1;
    }

© 著作权归作者所有

共有 人打赏支持
豆豆麻麻
粉丝 9
博文 17
码字总数 4005
作品 0
南京
前端工程师
HTML5触摸事件(touchstart、touchmove和touchend)

 HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今...

sinat_39430615 ⋅ 2017/11/13 ⋅ 0

关于IPAD上touchend()事件触发条件

我的理解: 手指触摸到ipad屏幕上时触发touchstart()事件 手指不离开ipad屏幕做移动一直触发touchmove()事件 手指离开ipad屏幕时触发touchend()事件 遇到的问题: 手指触摸到ipad屏幕上时触发...

-卒- ⋅ 2013/04/22 ⋅ 3

移动端web开发clicktouchtap的区别讲解

移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap和doubleTap分别代...

qq_15980201的博客 ⋅ 2017/12/11 ⋅ 0

移动端WEB开发,click,touch,tap事件浅析

一、click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。 singleTap和doubleTap 分别代表单次点击和双次点击。 二、关于t...

柒月-小妖精 ⋅ 2015/08/03 ⋅ 0

HTML5 手势检测原理和实现

http://blog.csdn.net/sinat_17775997/article/details/52270142 https://github.com/eeandrew/gestures/blob/master/src/Gestures.js 常用的 HTML5 手势可以分为两类,单点手势和两点手势。......

zgpeterliu ⋅ 2017/12/07 ⋅ 0

移动端触摸事件代码实例

ouchstart 开始触摸 touchmove 手指移动 touchend 结束触摸 touchstart 在手指触摸的一瞬间发生,如果有多个手指触摸,每个手指触摸的时候都会发生。 touchend 在手指离开屏幕的一瞬间发生,...

WYX15011474269的博客 ⋅ 2017/12/20 ⋅ 0

JS移动客户端--触屏滑动事件

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

rihgtzhao ⋅ 2016/09/13 ⋅ 0

html5 的touchstart、touchmove和touchend 事件

http://bbs.html5cn.org/thread-84163-1-1.html http://www.jb51.net/html5/70096.html touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当...

zwjjap ⋅ 2015/12/24 ⋅ 0

深入了解iPad上的MouseEvent

iPad上没有鼠标,所以手指在触发触摸事件(TouchEvent)的时候,系统也会产生出模拟的鼠标事件(MouseEvent)。 这对于普通网页的浏览需求而言,基本可以做到与PC端浏览器无明显差异。但是如...

Rella ⋅ 2012/05/15 ⋅ 2

从触摸开始

前言 最近看了一本《移动Web手册》的书,奇舞团翻译的,非常不错。个人觉得在进入移动端的时候最先应该了解移动端新的交互模式:触摸。为什么这样说呢?在PC端,我们大多数的交互都是通过鼠标...

卢林 ⋅ 2016/09/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Boost库编译应用

版本:Boost 1.66.0 Windows库编译 官网指南:直接执行bootstrap.bat处理文件即可,可以我却遇到一堆的问题。 环境:Windows 10 + Visual Studio 2017 Boost编译出来库命名 boost库生成文件命...

水海云 ⋅ 7分钟前 ⋅ 0

解决Eclipse发布到Tomcat丢失依赖jar包的问题

如果jar文件是以外部依赖的形式导入的。Eclipse将web项目发布到Tomcat时,是不会自动发布这些依赖的。 可以通过Eclipse在项目上右击 - Propertics - Deployment Assembly,添加“Java Build ...

ArlenXu ⋅ 7分钟前 ⋅ 0

iview tree组件层级过多时可左右滚动

使用vue+iview的tree组件,iview官网iview的tree树形控件 问题描述:tree层级过多时左右不可滚动 问题解决:修改overflow属性值 .el-tree-node>.el-tree-node_children { overflow: vi...

YXMBetter ⋅ 9分钟前 ⋅ 0

分布式锁

通过数据库实现 http://www.weizijun.cn/2016/03/17/%E8%81%8A%E4%B8%80%E8%81%8A%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81%E7%9A%84%E8%AE%BE%E8%AE%A1/ ZK实现:curator-recipes分布式锁的使用......

素雷 ⋅ 17分钟前 ⋅ 0

Sublime Text3 快捷键

选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名...

AndyZhouX ⋅ 24分钟前 ⋅ 0

XamarinAndroid组件教程RecylerView自定义适配器动画

XamarinAndroid组件教程RecylerView自定义适配器动画 如果RecyclerViewAnimators.Adapters命名空间中没有所需要的适配器动画,开发者可以自定义动画。此时,需要让自定义的动画继承Animation...

大学霸 ⋅ 24分钟前 ⋅ 0

eureka 基础(二)

使用Eureka服务器进行身份验证 如果其中一个eureka.client.serviceUrl.defaultZone网址中包含一个凭据(如http://user:password@localhost:8761/eureka)),HTTP基本身份验证将自动添加到您...

明理萝 ⋅ 27分钟前 ⋅ 1

Kubernetes(五) - Service

Kubernetes解决的另外一个痛点就是服务发现,服务发现机制和容器开放访问都是通过Service来实现的,把Deployment和Service关联起来只需要Label标签相同就可以关联起来形成负载均衡,基于kuberne...

喵了_个咪 ⋅ 27分钟前 ⋅ 0

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 40分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 45分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部