2 cr4blm123 cr4blm123 于 2016.01.14 13:45 提问

手机网页,js或jquery判断用户手指擦过的方向

近期上班这要做一个手机网站,页面什么的都没问题,现在面临一个大问题。
用户的网站,列表页,有个管理的功能,类似于微信,在那条数据上,手指向左擦拭,显示删除按钮,向右擦拭,显示修改按钮。
想请教下前辈们,怎么用js或者jquery判断手指擦拭的方向。

7个回答

BlackStar120
BlackStar120   2016.01.15 11:48
已采纳

js(导入jquery-mobile)

 $(document).on("pagecreate", "#page", function () {
    $(document).on("swipeleft swiperight", "#page", function (e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
            if (e.type === "swiperight") {
                alert("向右滑动");
            } else if (e.type === "swipeleft") {
                alert("向左滑动");
            }
        }
    });
});
CSDNXIAON
CSDNXIAON   2016.01.14 13:46

用js 或者是jquery 判断 用户是什么浏览器的方法
学习--jquery 记录 使用js判断滚轮滚动方向
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

91program
91program   Ds   Rxr 2016.01.14 14:15

这个应该是用手机系统的手势,还不是 JS 或 Query。因为 JS 或 Query 本身并没有对手势的支持!

showbo
showbo   Ds   Rxr 2016.01.14 16:57

添加touchStart和touchEnd/touchMove事件,判断下event.changedTouches[0].pageX就可以知道方向了

http://aresli.com/finger-direction.html

enpterexpress
enpterexpress   Rxr 2016.01.14 17:04

添加touchStart和touchEnd/touchMove事件
判断下event.changedTouches[0].pageX就可以知道方向了
正解

BlackStar120
BlackStar120   2016.01.15 11:50

html

  <div data-role="page" id="page" data-url="page">
        ...
    </div>
sinat_15114467
sinat_15114467   2016.01.20 20:34

这不是jquery了 ,。。。。这还得区分andriod和IOS,忒麻烦

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
移动应用滑动屏幕方向判断解决方案,JS判断手势方向
问题分类 滑动屏幕打开相应功能操作。 问题描述 1、用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题。 2、大家都知道,划动都有角度问题,如:向330度方向滑动手机,要计算出它的方向问题。 3、HTML5提供的滑动事件,只能读取到起点和终点坐标,计算角度问题。 4、手机屏幕坐标与标准坐标系
移动端js判断手指滑动方向
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 function getDirection(start
移动端网页判断手指触摸滑动的方向
如今的应用也是越来越人性化,比如继续向上滑动或者向下滑动,加载更多内容,这些便捷的操作我们在网页中也可以实现,首先第一步就是判断用户手指触摸滑动的方向。 判断用户手指滑动的方向,一种比较通用的解决方法就是,记录用户手指刚接触屏幕的位置,然后减去用户手指离开屏幕的位置,然后判断这个值的正负。 $("body").on("touchstart", function(e) {     e.pre
移动应用滑动屏幕方向判断解决方案JS判断手势方向
问题描述: 滑动屏幕打开相应功能操作。 1、用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题。 2、大家都知道,划动都有角度问题,如:向330度方向滑动手机,要计算出它的方向问题。 3、HTML5提供的滑动事件,只能读取到起点和终点坐标,计算角度问题。 4、手机屏幕坐标与
H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的
判断移动端手指的滑动方向
转载自:https://www.cnblogs.com/lijuntao/p/6479972.html原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY;   2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。代码:  $(&quot;body&quot;...
jQuery -- touch事件之滑动判断(左右上下方向)
js代码:$("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } }
对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的。最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起。其实就是一个简单的判断手指滑动方向让页面滚动一屏的高度。 先来看代码: ? 1 2 3 4 5 6 7 8 9 10 11
JS事件监听手机屏幕触摸事件
处理Touch事件能让你跟踪用户的每一根手指的位置,可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 事件属性一般通过 event.
如何灵敏的检测移动端的手指上下左右滑动
只要这段js代码就行了     var startx, starty;     //获得角度     function getAngle(angx, angy) {         return Math.atan2(angy, angx) * 180 / Math.PI;     }     //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动     funct