toxic-johann / toxic-johann.github.io

my blog
6 stars 0 forks source link

【2015-10-26 】web端touch开发手记 #11

Open toxic-johann opened 7 years ago

toxic-johann commented 7 years ago

只是记录一下上次用到touch开发的时候遇到的一些问题。 一般来说,很多人开发touch事件都会调用zepto上的一些接口。不过由于本人愚钝,并不知道有这种东西。故直接调用了html5定义中的touchstart,touchend,touchmove三个事件。事实上这三个事件也十分完美的可以模拟出大部分touch事件。

这一次我要实现的是一个长按事件。 那么原理就十分简单了。 首先当用户touch的时候会触发touchstart,用户离开的时候会触发touchend。我们只需要在touchstart后调用一个计时器记录,touchend结束这个计时器,就可以判断用户是否长按了,并且通过此达到我们希望的一些目的。 因为,我利用了setTimeout方法。


实现是比较简单的活。 那么在移动端当你长按的时候,你会遇到一种常有的情况。没错,长按复制,长按默认事件等等。

这个解决方法也十分简单。 对于IOS和大部分安卓机型,只需要在页面的CSS上添加如下两句设定即可。

-webkit-user-select : none; 
-webkit-touch-callout:none;

但是这对于神奇的小米系机型还是不够的,他会忽略掉这两句限定。那么如果你的事件是冒泡获取的话就简单了。 你只需要在其中截取默认事件就可以了。

evt.preventDefault();

其实开发上还是十分简单的。