热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js的touch事件的实际引用

研究移动端页面的触屏滑动事件,搜索jquery的相应技术支持实在繁琐,而js只需几步简单定义即可,下面与大家分享下js的touch事件的实际引用

一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今。

而js,则被我主观的认为底层技术而抛弃。

直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐(当然也可能是我对jquery的理解不够),而js只需几步简单定义即可。

由于对js的了解比较少,最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用:

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

以上代码不可避免的使用了jquery的某些东西,不使用jquery的可以忽略之。

相应的事件有:

touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。

以上事件的event对象上面都存在如下属性:
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性:
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

好吧,我其实也刚开始学,反正先把一些百度来的属性记下来再说。


推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 十三、实现模糊查询功能
    本文介绍了在index.jsp页面中实现模糊查询功能的具体步骤,包括添加必要的HTML元素和JavaScript代码。 ... [详细]
  • 本文详细介绍了 Charles 工具的下载、安装、配置及使用方法,特别针对 HTTP 和 HTTPS 协议的数据抓取进行了说明。 ... [详细]
  • 用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS
    HTTP协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的HTTP的网站是不 ... [详细]
  • 根据经济日报的报道,截至3月15日,包括抖音、今日头条、微信、淘宝、百度、大众点评、微博和小红书在内的多个主流App已经上线了算法关闭功能,用户可以在后台一键关闭“个性化推荐”。 ... [详细]
  • 拼多多的崛起之路
    随着4G通信技术的发展,互联网产品从PC端转向移动端,图像传输速度更快、更清晰,智能设备的应用提升了用户体验。移动互联网的普及为拼多多的崛起提供了时代背景。 ... [详细]
  • Halcon之图像梯度、图像边缘、USM锐化
    图像梯度、图像边缘、USM锐化图像梯度、图像边缘、USM锐化图像梯度、图像边缘、USM锐化图像卷积:1.模糊2.梯度3.边缘4.锐化1.视频教程:B站、 ... [详细]
  • 360搜索引擎上线,挑战谷歌市场地位
    360公司近日推出了自家的搜索引擎,将默认搜索从谷歌替换为360搜索。这一举动引发了国内搜索引擎市场的激烈竞争,可能对谷歌在中国的市场份额产生重大影响。 ... [详细]
  • 对于众多创业公司而言,选择小程序或小视频的发展方向至关重要。本文将深入分析小程序和小视频的特点、优势及局限,帮助创业者做出更明智的选择。 ... [详细]
  • 从0到1搭建大数据平台
    从0到1搭建大数据平台 ... [详细]
  • 在 Ubuntu 中遇到 Samba 服务器故障时,尝试卸载并重新安装 Samba 发现配置文件未重新生成。本文介绍了解决该问题的方法。 ... [详细]
  • R语言及RStudio的安装步骤详解
    本文详细介绍了如何正确安装R语言及其集成开发环境RStudio。首先,需要确保安装R语言的基础环境,然后再安装RStudio。虽然先安装RStudio在技术上可行,但为了遵循最佳实践,建议先安装R语言。以下是R语言安装包的下载链接。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 本文提供新旧BOM(物料清单)对比的操作步骤,包括下载地址和详细操作说明。通过本指南,您可以轻松完成BOM的对比工作。 ... [详细]
  • 在2019中国国际智能产业博览会上,百度董事长兼CEO李彦宏强调,人工智能应务实推进其在各行业的应用。随后,在“ABC SUMMIT 2019百度云智峰会”上,百度展示了通过“云+AI”推动AI工业化和产业智能化的最新成果。 ... [详细]
author-avatar
拍友2602911553
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有