关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了

1.移动端长按事件

var timer = null;
$(ele).on('touchstart',function(){
timer = setTimeout(function(){
alert("我是长按事件!")
},800);
});
$(ele).on('touchend',function(){
clearTimeout(timer);
});

说明:通过定时器模拟长按事件,这个例子基于jQuery,【ele】是要长按的元素;

2.移动端上下左右滑动事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>touch</title>
</head>
<body>
<div id="touchLR">动起来</div>
<script>
// 左右滑动事件
var startX = 0, startY = 0;
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标 var text;
//判断滑动左右方向
if (x - startX>=30) {
text = '向右滑动';
document.getElementById('touchLR').innerHTML = text;
}else if(x - startX<=-30){
text = '向左滑动';
document.getElementById('touchLR').innerHTML = text;
}
//判断滑动上下方向
if (y - startY>=30) {
text = '向下滑动';
document.getElementById('touchLR').innerHTML = text;
}else if(y - startY<=-30){
text = '向上滑动';
document.getElementById('touchLR').innerHTML = text;
}
}
catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
}
bindEvent();
</script>
</body>
</html>

说明:具体原理一搜一堆,这里的具体例子,拷贝就能用;我的学习方式是,不管什么原理之类的,先要做的就是把需求弄出来,在捉摸原理;事半功倍

移动端事件touchstart、touchmove、touchend的更多相关文章

  1. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  2. 获取touchstart,touchmove,touchend 坐标

    简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...

  3. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  4. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  5. 手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果

    在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...

  6. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  7. JQuery 获取touchstart,touchmove,touchend 坐标

    JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  8. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  9. JQuery获取touchstart,touchmove,touchend坐标

    $('#id').on('touchstart',function(e) { ].pageX; }); JQuery如上. document.getElementById("id" ...

随机推荐

  1. javascript类型系统——undefined和null

    × 目录 [1]原因 [2]undefined [3]null 前面的话 一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...

  2. 深入理解CSS伪类

    × 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他 前面的话 伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上c ...

  3. java中finally和return的执行顺序

    注意:return的位置... 从这几个例子中可以看到,如果try之前没有有条件的return,则try..catch..finally语句块中的语句都是顺序执行(如果try中或者catch中 有re ...

  4. Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)

    具体步骤: 1.安装开发工具WebStorm: 2.安装node/npm(下载地址:https://nodejs.org/download/)选择适合你的xxx.mis安装: 3.安装express框 ...

  5. 一道 google曾出过的笔试题:编程实现对数学一元多项式的相加和相乘操作(1)

    数学中一元n次多项式可表示成如下的形式:  Pn(x)=p0+p1x+p2x^2+…+pnx^n     (最多有 n+1 项,n +1 个系数唯一确定她)      (1)请设计一套接口用以表示和操 ...

  6. LeetCode:Move Zeroes

    LeetCode:Move Zeroes [问题再现] Given an array nums, write a function to move all 0's to the end of it w ...

  7. [转载]TFS与Project、Excel同步

    我们还可以使用Microsoft Excel和Microsoft Project来连接到TFS,方法如下: 通过Microsoft Excel连接到TFS,在安装了Team Explorer后,Mic ...

  8. RobotFramework - 基础入门

    Robot Framework Wiki HomePage Robot Framework User Guide Robot Framework documentation Robot Framewo ...

  9. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  10. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...