首页
学习
活动
专区
工具
TVP
发布

【如果你要学JS XIV】—— 移动常用事件-移动touch触摸事件

导绪移动浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...因为平时我们都是给元素注册触摸事件,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣,targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个...touchstart,touchmove,touchend 可以实现拖动元素2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0] 里面的pageX和pageY3.拖动的原理:手指移动计算出手指移动的距离...,然后用盒子原来的位置+手指移动的距离4.手指移动的距离 = 手指滑动中的位置 - 手指刚开始触摸的位置<!...= e.targetTouches[0].pageY - startY; // 移动盒子,盒子原来的位置+手指移动的距离 this.style.left =

44000
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5移动开发的常用触摸事件

HTML5移动开发的常用触摸事件 h5开发手机是经常会有触摸事件和滑动事件 HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略...因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC的鼠标和键盘事件是不够用的。   ...在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。...clientY:触摸目标在视口中的y坐标。   identifier:标识触摸的唯一ID。   pageX:触摸目标在页面中的x坐标。   pageY:触摸目标在页面中的y坐标。   ...每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。

1.5K10

第127天:移动-获取触摸点的位置

一、移动轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) (1)手指触摸开始时记录手指所在的坐标X (2)获取界面上的轮播图容器 var $carousels=$('.carousel')...next':'prev'); javascript代码 1 //移动轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标...next':'prev'); 40 41 42 43 } 二、移动获取触摸点的方式说明 1.touchstart事件        手指头触摸屏幕上的事件 2.touchmove...clientX:触摸目标在视口中的x坐标。 clientY:触摸目标在视口中的y坐标。 identifier:标识触摸的唯一ID。 pageX:触摸目标在页面中的x坐标。...pageY:触摸目标在页面中的y坐标。 screenX:触摸目标在屏幕中的x坐标。 screenY:触摸目标在屏幕中的y坐标。 target:触目的DOM节点目标。

1.4K20

移动 模拟手机联系人触摸A~Z导航

HTML5学堂:今天要与大家分享一个当前移动很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。...有些手机的音乐导航也类似,具体可详见下图: touchmove的问题 在移动,我们可以使用touch事件进行处理,此处首先想到的是使用touchmove事件。...实现触摸a~z导航(模拟手机联系人) 当前能够想到的实现方法有两种(也均测试无误) 第一种方法:手指滑动的时候,判断手指滑动的竖向位置,如果到达相应标签的位置(由于标签是fixed定位模式,因此可以拿到每个标签...> HTML5学堂 移动开发.../zepto.js"> var con = document.getElementById('con'); var list

1.5K50

Appium移动自动化测试--元素操作与触摸动作

之前陆续介绍了移动测试的相关知识,今天介绍下元素定位之后的操作与触摸动作。...往期推文: Appium移动自动化测试--基础预热 Appium移动自动化测试--搭建测试环境 Appium移动自动化测试--录制测试用例并运行 Appium移动自动化测试--使用IDE编辑并强化脚本...text内容 print(driver.find_element_by_xpath(" //android.widget.LinearLayout[1]//xxx").text) TouchAction触摸操作...Tap 在支持触摸的设备上单击/点击 Double Tap 在触摸屏上双击 Move To 手指在屏幕上移动/拖动 Long Tap 在触摸屏上长按进行操作 Scroll 触摸屏上滚动 Multi Touch...driver.swipe(width / 4, height / 2, width * 3 / 4, height / 2, during); 6 } 7} 下期更新预告: Appium移动自动化测试

1.3K10

Appium移动自动化测试--元素操作与触摸动作【移动自动化测试教程奉上】

之前陆续介绍了移动测试的相关知识,今天介绍下元素定位之后的操作与触摸动作,学习计划因为各种原因,搁置了很久,接下来继续之前的计划,APP和API接口测试。...Appium往期推文: Appium移动自动化测试--基础预热 Appium移动自动化测试--搭建测试环境 Appium移动自动化测试--录制测试用例并运行 Appium移动自动化测试--使用...IDE编辑并强化脚本 Appium移动自动化测试--控件定位方法 Appium移动自动化测试--元素操作与触摸动作 Appium移动自动化测试--搭建模拟器和真机环境 Appium移动自动化测试...--测试用例改造 Appium移动自动化测试--capability使用和常用设备交互命令 常见自动化动作支持 click sendKeys swipe touch action 元素操作 1.click...Tap 在支持触摸的设备上单击/点击 Double Tap 在触摸屏上双击 Move To 手指在屏幕上移动/拖动 Long Tap 在触摸屏上长按进行操作 Scroll 触摸屏上滚动 Multi Touch

1.1K20

移动前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC和浏览器可公用,但有些事件却只在移动产生,如触摸相关的事件 本文整理了移动常见的一些事件,包括原生支持的click、touch、tap、swipe事件,也有定义型的gesture...手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到 一、事件定义及分类 1. click事件 单击事件,类似于PC的...click,但在移动中,连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件,有touchstart touchmove touchend touchcancel...四种之分 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候...2) 改用zepto.js正常 ? 看第五次的touch ? 看第二次的touch ? 看第四次的touch ?

1.9K20

Vue.js开发移动经验总结

作者:阡ゼ陌 移动适配 相对于PC端来说,移动设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动适配是我们进行移动开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动的viewport,固定不变,可以认为是设备视口宽度device-width。...user-scale=no禁止缩放 所以现在我们知道,这段在移动常见的代码的意思,即将visualviewport和layoutviewport设置为idealviewport的值;这样我们在移动就不会出现滚动条...UI出图的时候一般是有一个固定的宽度的,而我们实际的移动设备的宽度却都不太一样,但是如果页面元素的缩放比例和页面宽度的缩放比例一致,在不同尺寸的设备下我们网页的效果也将会是一致的。...键盘弹出与使用transform属性的情况在移动是很常见的,所以需要谨慎使用position:fixed。 推荐使用flex flex,即弹性布局,移动兼容性较好,能够满足大部分布局需求。

4.1K10

JS案例 - 基于vue的移动长按手势

而在这个过程中,正好是触摸的三个事件。 监听手指按下去后是否有移动,就该touches上场了,监听他的clientX,clientY只要没变就是没移动。...那就是一个手机自带的效果了:   长按时,在移动触摸文字,(至少ios里)会出现选择文字等干扰我们的真正功能,用了preventDefault()这个属性后就没有了。...也就是满足了长按事件 }, 500); /* 手指一旦触摸屏幕,要立即做的第二件事:记录触摸时的点的位置,并存在x,y两个变量里*/ x =...所以每次获取数组里边的第一个对象对应的clientX和clientY,就是实时的移动点的位置 //找这个点的作用,就是为了监听用户,是否按住还移动了。...// 那么移动的话,先要清除事先埋伏的定时器timer1.要不然,虽然不是长按事件但是倒计时还在进行中。

8.9K30
领券