标签：touch swipe coordinates javascript

我正在使用平板电脑/智能手机的滑动功能来构建此图片库.我在iPad上获得了非常奇怪的结果,所以我决定一直追溯到一开始,并在发生不同事件时打印出来.

在我用手指完成一次滑动之后,以下代码应该会发出警告：“ start.move.move.move.end”(“移动”的数量取决于滑动动作的持续时间).

        itemWrap[0].ontouchstart = function(e) {
            _self.msg.push("start");

        }

        itemWrap[0].ontouchmove = function(e) {
            _self.msg.push("move");
        }

        itemWrap[0].ontouchend = function(e) {
            _self.msg.push("end");

            // join messages and alert to browser
            msg = _self.msg.join(".") || "empty";
            alert(msg);
        }

但是,我收到了非常奇怪的警报,它们在Android / iOS设备上有很大的不同.在Android上,大多数情况下结果都令人期待：

“ start.move.move.move.move.end”

“ start.end”(在轻拂屏幕时)

“ start.move.start.end”(每隔触摸一次就会发生一次)

但是在iPad上,我得到了一些非常奇怪的结果.在第一次触摸操作中,我得到的正是预期的结果,但是在第二次触摸操作中,包含结果的警报(“ start.move.move.move.end”)在触摸屏幕时立即触发,并且始终包含以前的结果.当我第三次触摸屏幕时,它又回到了正常操作状态,因此每执行一次其他触摸操作都会执行一次.

我到处寻找有类似问题的人,但我似乎得到的最接近的用户是多点触摸操作存在问题的用户(我对此不感兴趣).关于为什么发生这种情况有什么建议吗？

解决方法:

您必须记住,触摸是多点触摸,并不像总是一个鼠标事件.每次您获得触摸事件(touchstart,touchstart,touchend),您还将获得标识符

itemWrap[0].ontouchstart = function(e) {
    // e.touches.length - number of touches
    // e.touches[e.touches.length - 1].identifier - last touch is the last one on the list
    // e.touches[e.touches.length - 1].pageX and .pageY - place of the touch
    _self.msg.push("start");
}

因此,当您进行touchmove和touchend时,您必须检查该标识符以查看移动或结束了哪个触摸.您可以通过将数据保存在touchstart中来实现：

var t = {pageX:event.touches[index].pageX, pageY:event.touches[index].pageY, identifier:event.touches[index].identifier};
touches.push(t);

然后使用

event.changedTouches[0].identifier

在这里,您不需要浏览该列表,因为它始终只是一个,而您必须将该标识符与保存在列表中的标识符进行比较.

希望这会有所帮助.

标签：touch,swipe,coordinates,javascript
来源： https://codeday.me/bug/20191101/1984989.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。