首页
学习
活动
专区
工具
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 =

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

第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

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

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

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

1.5K50

WPF 触摸失效 试试重启触摸

在使用一些诡异的系统以及诡异的触摸框的时候,也许会出现 WPF 程序触摸失效,失效的本质原因是 Win32 层应用触摸失效。...也许出现的问题是某个窗口设置 TopMost 然后插拔一些触摸设备等,这些行为,如果触摸设备太过诡异,也许就会让 Win32 窗口触摸失效。...而我自己基于开源的 WPF 框架也定制了可以从触摸线程都重启的强力版本,当然了,这个版本非开源的版本 在使用本文的方法之前,请确定你对触摸有足够的了解 如果你对触摸的了解很少,那么我推荐你先看以下博客...WPF 触摸屏应用需要了解的知识 浅谈 Windows 桌面端触摸架构演进 WPF 客户端开发需要知道的触摸失效问题 对于 Win32 应用来说,如果应用的触摸失效了,可以的解决方法是重新注册一次触摸,...关于在 WPF 中的触摸调用细节请看 WPF 触摸到事件 和 WPF 通过 InputManager 模拟调度触摸事件 重启注册触摸的步骤就是先反注册,然后再次注册。

1.2K40

WPF 插拔触摸设备触摸失效

最近使用 WPF 程序,在不停插拔触摸设备会让 WPF 程序触摸失效。通过分析 WPF 源代码可以找到 WPF 触摸失效的原因。...获取触摸流程循环用于拿到用户触摸相关。很多的时候,在用户正常使用的流程只是运行初始化流程循环一次,之后在用户触摸的时候就通过获取触摸流程循环拿到值。...因为 GetPenEvent 和 GetPenEventMultiple 都只有在触摸屏收到触摸信息或者 _pimcResetHandle 被释放会返回,而在用户拔出触摸屏时,触摸屏是没有收到触摸信息,...因为在用户插入触摸屏时触发了 TabletAdded 消息,在之后用户触摸时不会有其他的插拔触摸相关消息。...实际上这里在 _handles 没有值就是用户没有触摸屏,用户插入触摸屏的时间是很少的,没有几个用户一天没事都在插入拔出触摸屏,所以在用户插入触摸屏时再创建一个新的线程,在用户拔出触摸屏去掉这个线程是可以的

1.6K10

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...element);//点击操作 4action.doubleTap(element);//双击操作 5action.down(10, 10);//按住 6action.moveTo(50, 50);//移动

1.3K10

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

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click、touch、tap、swipe事件,也有定义型的gesture...click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件,有touchstart touchmove touchend touchcancel...四种之分 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候...2) 改用zepto.js正常 ? 看第五次的touch ? 看第二次的touch ? 看第四次的touch ?...由此可知: touches记录的是屏幕上全部的触摸对象的信息 targetTouches记录的是当前DOM节点上全部的触摸对象的信息 changedTouches记录着触发该次事件的信息,一般长度为1

2K20

WPF 从触摸消息转触摸事件

在 WPF 程序可能因为一些坑让程序触摸失效,如果此时还可以收到系统的触摸消息,那么可以通过从触摸消息转触摸事件解决程序触摸失效但不适合所有触摸失效程序 在 WPF 的触摸代码写的不是很清真,特别是触摸到事件可能出现一些坑...,如WPF 在触摸线程等待主线程窗口关闭会让主线程和触摸线程相互等待 和 WPF 插拔触摸设备触摸失效 等,有时候在开机的过程,如果启动快了,触摸设备还没准备好,刚好在 WPF 初始化的过程 USB 触摸设备才准备好...但是还可以收到系统的触摸消息,可以通过本文的黑科技收到触摸 在 WPF 的框架,触摸是从 PENIMC 里面获取的,如果通过自己创建一个模拟的触摸设备,请看 WPF 模拟触摸设备 也可以做到模拟一个触摸.../// public int DwID; /// /// 用于指定触控点按住、释放和移动的各个方面...,需要使用相同的 TouchDevice 于是在按下和移动等需要有一个相同的实例,通过创建一个静态的字典按照触摸的 id 存放 private static readonly Dictionary

1.1K20
领券