Open toxic-johann opened 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();
其实开发上还是十分简单的。
只是记录一下上次用到touch开发的时候遇到的一些问题。 一般来说,很多人开发touch事件都会调用zepto上的一些接口。不过由于本人愚钝,并不知道有这种东西。故直接调用了html5定义中的touchstart,touchend,touchmove三个事件。事实上这三个事件也十分完美的可以模拟出大部分touch事件。
这一次我要实现的是一个长按事件。 那么原理就十分简单了。 首先当用户touch的时候会触发touchstart,用户离开的时候会触发touchend。我们只需要在touchstart后调用一个计时器记录,touchend结束这个计时器,就可以判断用户是否长按了,并且通过此达到我们希望的一些目的。 因为,我利用了setTimeout方法。
实现是比较简单的活。 那么在移动端当你长按的时候,你会遇到一种常有的情况。没错,长按复制,长按默认事件等等。
这个解决方法也十分简单。 对于IOS和大部分安卓机型,只需要在页面的CSS上添加如下两句设定即可。
但是这对于神奇的小米系机型还是不够的,他会忽略掉这两句限定。那么如果你的事件是冒泡获取的话就简单了。 你只需要在其中截取默认事件就可以了。
其实开发上还是十分简单的。