鼠标事件的移动端优化

mouse事件如何优化使其在手机端可以运行

由于触碰手机都没有鼠标,所以无法对mouse的一系列指令做出反应,如

 mousedown;mouseup;mousemove 等

所以必须进行一些列的优化才可以然这些指令在手机上运行。
步骤主要分为两个:

  1. 找到手机上对应的指令,并命名一个新的指令,使其可以在手机与电脑端运行

  2. 如果涉及坐标的代码,由于手机上的坐标与电脑的不同,还需要再进行优化

1.命名新的指令

在手机端与电脑端,有mouse(电脑)和touch(手机)常用的指令对应如下

mousedown = touchstart
mouseup = touchend
mousemove = touchmove 

这里以mousedown和touchstart为例,先命名一个新的两个指令把这两个包括进去:

let DownOrStart= ('ontouchstart' in window )? 'touchstart':'mousedown'

这时候新的指令就命名好了,里面有个很关键的点很容易出bug,就是引号内的指令,里面不能有任何空格,不然会识别不了。
接下来就可以把指令导入函数了:

Element.addEventListener(DownOrStart,(e) =>{})

这时候就完成第一步了。

2.改作标的表达

电脑端的X、Y为:

  • X=e.clientX
  • Y=e.clientY

但在手机端中,是不同的,所以我们应该运用个短路的指令,使其根据客户端的不同二选一 :

X=e.clientX||e.targetTouches(0).clientX
Y=e.clientY||e.targetTouches(0).clientY

要提醒的是,有关于坐标的地方,都需要进行这个优化。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容