touch触摸事件
事件对象
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!
- W3C DOM把事件对象作为事件处理函数的第一个参数传入进去
- IE将事件对象作为window对象的一个属性(相当于全局变量)
originalEvent对象
在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象。经查阅发现它是jquery事件对象。
$(window).on("touchstart","body",function(e){
console.log(e)
})
上面例子中event中有一个originalEvent属性,而这才是真正的touch事件。jQuery.Event 是一个构造函数,其创建一个可读写的jQuery事件对象,并在event 对象保留了对这个原生事件对象 event 的引用($event.originalEvent)。我们绑定的事件处理程序所处理的事件对象都是 $event。该方法也可以传递一个自定义事件的类型名,用于生成用户自定义事件对象。
touch事件
touchmove
: 当手指在屏幕上滑动的时候连续地触发。
touchstart
: 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchend
: 当手指从屏幕上离开的时候触发。
TouchEvent对象
每一个touch事件的触发都会产生一个TouchEvent对象,以下是TouchEvent对象三个比较常用的重要属性
- touches 当前位于屏幕上的所有手指的一个列表。
- targetTouches 特定于事件目标的Touch对象的数组。[当前手指]
- changeTouches 表示自上次触摸以来发生了什么改变的Touch对象的数组。
在这里,我用js写了一个touch事件,点击屏幕可触发,将其事件事件对象在控制台打印出,结果如下(箭头指向的是上述三个属性):
window.addEventListener("touchstart",function(event){
console.log(event);
})
触摸事件对象属性
touches、targetTou、changeTouches都包含以下属性值
- clientX:触摸目标在视口中的x坐标。
- clientY:触摸目标在视口中的y坐标。
- identifier:标识触摸的唯一ID。
- pageX:触摸目标在页面中的x坐标。
- pageY:触摸目标在页面中的y坐标。
- screenX:触摸目标在屏幕中的x坐标。
- screenY:触摸目标在屏幕中的y坐标。
- target:触摸的DOM节点目标。
还是上面的那个例子,changeTouches对象在控制台输出如下:
touch触摸事件的更多相关文章
- Touch事件 移动端touch触摸事件
<!-- HTML5 --> <!DOCTYPE html> <html> <head> <title>TouchEvent测试</t ...
- 移动端touch触摸事件(滑动效果和手势操作)
一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...
- 手机页面touch触摸事件
请看示例: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=" ...
- javascript触摸事件touch使用
详细内容请点击 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规范. 在本文深入研究iOS和 ...
- 触摸事件 Touch MotionEvent ACTION
MotionEvent简介 当用户触摸屏幕时,将创建一个MontionEvent对象,MotionEvent包含了关于发生触摸的位置.时间信息,以及触摸事件的其他细节. 获取MontionEvent对 ...
- 与众不同 windows phone (24) - Input(输入)之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦
原文:与众不同 windows phone (24) - Input(输入)之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦 [索引页][源码下载] ...
- 移动端触摸(touch)事件
移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...
- JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 《从零开始学Swift》学习笔记(Day 68)——Cocoa Touch设计模式及应用之响应者链与触摸事件
原创文章,欢迎转载.转载请注明:关东升的博客 应用与用户进行交互,依赖于各种各样的事件.事件响应者对象是可以响应事件并对其进行处理的对象,响应者链是由一系列链接在一起的响应者组成的.响应者链在事件处理 ...
随机推荐
- Asp.net mvc 各个组件的分离
1. 系统常见的分层 在开发asp.net mvc应用的时候,visual studio 给我们创建了默认的文档结构,一般情况下我们在一个项目下工作,参考微软的官方例子:ContosoUniversi ...
- Android Material Design控件学习(一)——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
- Maven更新父子模块的版本号
前置条件: 1.安装有吃饭的家伙JAVA和MAVEN. 首先,需要有一个packaging类型为pom的pom.xml文件即我们的parent项目pom文件.在这个parent项目中配置好groupI ...
- VB6.0手册
1.Form窗体事件 Private Sub Form_Activate() '焦点在此窗口时触发 MsgBox "窗体的Activate事件" End Sub Priv ...
- Qt4.8.6 Embedded Linux 的编译与移植
最近买了个飞凌ok6410 的开发板,于是在其中搭建qt4.8.6运行环境.费了两三天时间,主要还是对Linux系统的生疏,在一些问题上徘徊很久,在这里做一些过程笔记.烧写ARM-Linux系统,根据 ...
- WPF中多个RadioButton绑定到一个属性
如图样: 在View中: <RadioButton IsChecked="{Binding Option, Converter={cvt:EnumToBooleanConverter} ...
- jsp,OGNL调用后台Action的某方法
用%{}可取出valueStack中的Action,可直接调用其方法. %{testa('key')} 即可调用到action的testa(String s) 方法 但这些都需要结合struts2的标 ...
- spring boot 拦截器
@SpringBootApplicationpublic class Application extends WebMvcConfigurerAdapter { public static void ...
- cp: omitting directory”错误
在linux下拷贝的时候有时候会出现cp:omitting directory的错误 , 是因为目录下面还有子目录,不能直接拷贝 解决办法: 命令:cp -r
- c#关于委托和事件(二)(介绍的很详细)
using System;using System.Collections.Generic;using System.Text; namespace Delegate { // 热水器 p ...