JS触摸事件

JavaScript045

JS触摸事件,第1张

在头部加上这个,防止双击的时候浏览器放大

当手指放在屏幕上触发。

当手指在屏幕上滑动时,连续地触发。

当手指从屏幕上离开时触发。

当系统停止跟踪时触发,系统什么时候取消,

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用 event.preventDefault()

,来阻止屏幕的默认滚动。

touches:表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时,event.touches.length=1,

当两个手指在触屏上时,event.touches.length=2,以此类推。

targetTouches:特定于事件目标的touch对象数组。

因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性:

clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点目标。

js负责页面与用户的交互,动态修改页面的内容。使用js脚本来处理用户的操作。

操作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样,组件绑定事件,js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才,附上 博客地址☜

事件分为冒泡事件和非冒泡事件

1.冒泡事件:当一个组件被触发后,该事件以此向父节点传递。

2.非冒泡事件:当一个组件触发后,该事件不会向父节点传递。

解释:当点击子节点时,会依次触发"bind事件2,bind事件1"

解释:当点击子节点时,只触发"bind事件2",而没有触发"bind事件1"

自基础班1.5.0起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch,当然catch还是中断,取消冒泡阶段。

1. 示例1,执行顺序为hand2,hand4,hand3,hand1

2. 示例2,加入capture-catch捕获事件,只执行hand2