移动端—— 兼容PC端,移动端的点击事件

移动设备上不支持鼠标事件,好在webkit内核的移动浏览器支持 touch 事件,所以触摸事件是移动应用中所必须的。touchstart、touchmove、touchend事件可以类比于mousedown、mouseover、mouseup的触发。

一、touch 相应事件

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节点坐标

二、PC 与 移动端 的适配问题(兼容)  【重点】

既然使用HTML5,当然是看中他的跨平台特性了,不仅仅要iOS和Android适配,pc上直接打开网页最好也是可以的,但是pc上只支持鼠标事件,

所以,解决方案:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件。

<script>
    /*** 手机按下态 * @type {
    {touchstart: string, touchend: string, initTouchEvents: Function}}  */
    var touchEvents = {
        touchstart: "touchstart",
        touchen
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值