js 功能-touch 事件(绑定&触摸点) |学习笔记

简介: 快速学习 js 功能-touch 事件(绑定 &触摸点)

开发者学堂课程【移动 Web 前端开发:js 功能-touch 事件(绑定&触摸点)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8414


js 功能 -touch 事件(绑定&触摸点)

 

内容介绍

一、touch 事件介绍

二、怎么使用这些事件

三、滑动效果分析

 

一、touch 事件介绍

移动端特有事件,触屏设备特有的事件, Android , iOS 设备上才有。

Touch 包含三个事件:

1、touchstart :

平时操控触屏设备的时候,经常会做滑动的操作,滑动的手势,滑动的先后顺序,先把手指放上去,再进行移动,手指移开屏幕,这样的一个过程。这个过程当中,全部都可以用 touch 事件监听到,点击某个按钮一样,在移动端做滑动,也有专门的事件监听,touchstart 的意思是,手指刚刚触摸到屏幕的时候,触发的事件  

2、touchmove :手指在屏幕上滑动的时候,会不停的触发

3、touchend :手指离开屏幕的时候,触发的事件

4、touchcancel : 被迫终止(来电)滑动,触发的事件,不需要掌握。手指离开屏幕是主动触发到的,touchcancel 是被动的,被迫终止的意思是,在滑动手机屏幕的时候,突然来电,手指被迫离开当前滑动的元素。

上面三个都是需要掌握的,

 

二、怎么使用(绑定)这些事件

绑定:

通过 on  来绑定,这样的绑定事件有一个特点,当再次绑定一个事件的时候会被覆盖掉。所以 window.onload 第二次绑定会被覆盖掉。

新建一个 HTML File 名为 05 touch 事件

--------javascript----------

< !DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta name=" viewport"content= " width=device -width , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>touch事件</title>

<style>

body{

margin: 0;

padding: 0;

}

div{

width: 200px;

height: 200px;

background: red;

}

</style>

</head>

<body>

<div> 

</div>

<script>

/*给 div 绑定 touch 事件*/

var dom = document.querySelector('div');

/* touchstart */

/* dom.attachEvent(); ie*/

/*手指刚刚触摸到屏幕的时候,触发的事件*/

dom.addEventListener('touchstart',function(){

console.log('touchstart');

});

/*手指在屏幕上滑动的时候,会不停的触发*/

dom.addEventListener('touchmove',function(){

console.log('touchmove');

});

/*手指离开屏幕的时候,触发的事件*/

dom.addEventListener('touchend',function(){

console.log('touchend');

});

</script>

</body>

</html>

'''

 

三、滑动效果分析

image.png

拖拽左右滑动的效果称之为滑动效果,拖拽怎么改变相对元素的位置,坐标,判断移动图标时候相对改变,改变所对应的元素,PC 端靠定位来移动的。

移动端的滑动效果依靠  touch 相关事件,根据触摸位置的改变,改变对应元素的位移  translate

1.怎么监听位置的改变

2.怎么获取当前的坐标

3.计算位移再设置滑动

紧紧触摸一下,touchmove 触发了,打开查看 touchstart

TouchEvent {isTrusted: true}

altKey: false

bubbles: true

cancelBubble: false

cancelable: true

changedTouches: TouchList

ctrlKey: false

currentTarget: null

defaultPrevented: false

detail:0

eventPhase: 0

isTrusted: true

isTrusted: true

metaKey: false

path: Array[5]

returnValue: true

shiftKey: false

sourceCapabilities: InputDeviceCapabilities

srcElement: div

target: div

targetTouches: TouchList

timeStamp: 1491360883100

touches: TouchList

type: "touchstart ”

view: Window

which: 0

__proto__ : TouchEvent

触摸点的集合,记录触摸点的

changedTouches :当前最新改变的触摸点集合,整个事件都会有 changedTouches 记录

targetTouches :记录当前元素上面的所有触摸点集合,touchend 没有记录

touches :记录页面上所有的触摸点集合, touchend 没有记录

/*手指在屏幕上滑动的时候 会不停的触发*/

dom. addEventListener( 'touchmove' , function(e){

console. log(e') ;

把 move 事件打印出来了

TouchEvent {isTrusted: true}

altKey: false

bubbles: true

cancelBubble: false

cancelable: true

changedTouches: TouchList

ctr1lhe/: false

currentTarget: null

defaultPrevented: false

detail:0

eventPhase:0

isTrusted: true

isTrusted: true

metaKey: false

path: Array[5]

returnValue: true

shiftKey: false

sourceCapabilities: InputDeviceCapabilities

srcElement: div

target: div

targetTouches: TouchList

timeStamp: 1491361518375

touches: TouchList

type: "touchmove"

view: Window

which:0

__proto__ : TouchEvent

/*手指离开平屏幕的时候触发的事件*/

dom. addEventListener( 'touchend' , function(e){

console.log(e);

altKey: false

bubbles: true

cancelBubble: false

cancelable: false

ChangedTouches: TouchList

ctrlKey: false

currentTarget: null

defaultPrevented: false

detail:0

eventPhase:0

isTrusted: true

isTrusted: true

metaKey: false

path: Array[5]

returnValue: true

shiftKey: false

sourceCapabilities: InputDeviceCapabilities

srcElement: div

target: div

targetTouches: TouchList

timeStamp: 1491361554634

touches: TouchList

type: "touchend"

view: Window

which:0

__proto__ : TouchEvent

目的:获取坐标

clientX 、 clientY

基于当前视口触摸点的坐标

pageX 、 pageY

基于当前页面触摸点的坐标

screenX 、 screenY

基于当前屏幕触摸点的坐标

在平常的手机端,浏览器上端有控制栏,有通知栏,浏览器下端有工具栏,可能还会有切换栏,中间部分才是网页。相对于屏幕而言,这个点可能是1.1,相对于页面而言,1.1,对屏幕而言是2.2,可能屏幕比页面大。不需要关心当前是什么坐标,因为在页面上移动的时候,从1.1移动到1.2,要判断这两个点之间的距离,跟坐标有很大的关系,这个点可能对于屏幕而言是2.2,2.3,但是两个点x轴方向上的距离是一样的,目的是用两个坐标记录两个点之间的距离。

假设这里有个目标控制元素,目标控制元素坐标距离是0和0,假如这个触摸点摸到了这个元素了,假设触摸点坐标为(1,1),移动到这里坐标变成了(1,2),改变了1个距离,根据这个1来进行位移到目标控制元素上,就形成了一个滑动的效果,这是在做轮播图之前一个准备工作,了解移动端三个特有的事件,了解如何去绑定,移动端包含哪些东西,获取坐标的目的,根据画的那个图来实现滑动效果。

相关文章
|
7天前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
8 0
|
2月前
|
JavaScript 前端开发
|
2月前
|
JavaScript 算法
|
2月前
|
JavaScript
|
2月前
|
JavaScript 前端开发
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
11天前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
14天前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
15天前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
2月前
|
JavaScript 前端开发
js的常用事件
js的常用事件
11 1