javascript - 在 Javascript 中滑动以删除 iOS 按钮？

Question

我刚刚在我的 iPod 上的 Safari 中使用 Facebook，每当你在 Messenger 中并在任何消息上向右/向左滑动时，都会出现一个删除按钮。

有人可以指导我并告诉我它是如何在 html/JS/jQuery 中完成的吗？

非常感谢!

Answer 1

我不知道 jQuery mobile，这将是一种更简单的方法，但这里是你如何在普通的 ol' JS 中做到这一点:

document.body.addEventListener('touchstart',function(e)
{
    e = e || window.event;//don't know how mobile browsers behave here
    var startCoordinates = {x:e.changedTouches[0].clientX,
                            y:e.changedTouches[0].clientY};
    var endHandler = function(e)
    {
        e = e || window.e;
        var xDiff = Math.abs(Math.abs(startCoordinates.x) - 
                             Math.abs(e.changedTouches[0].clientX));
        //unbind handler, avoid double listeners
        document.body.removeEventListener('touchend', endHandler, false);
        if (xDiff >= 50)
        {//assume small movement wasn't intended as swipe
            //here a swipe was detected
            if (confirm('Are you sure you want to delete X?'))
            {//perform xhr request here, or whatever
            }
        }
    };
    document.body.addEventListener('touchend',endHandler,false);
},false);

jQmobile 可能会容易得多，但这是我认为的基本思想，它适用于我为(Android、iOS(4 到 6)编写脚本的所有移动浏览器，甚至在开发模式下支持触摸的 chrome事件适用于这样的代码)。

更新:
添加了专门处理滑动的代码:

(function(G,und)
{
    'use strict';
    var load = function()
    {
        var tStart, body = document.body;
        tStart = function(e)
        {
            e = e || G.event;
            var coords = e.changedTouches[0].clientX,
            tEnd = function(e)
            {
                e = e || G.event;
                var currentX = e.changedTouches[0].clientX;
                if (body.removeEventListener)
                {
                    body.removeEventListener('touchend',tEnd,false);
                }
                else
                {//shouldn't be possible, but I don't know all browsers, of course
                    body.detachEvent('ontouchend',tEnd);
                }
                if ((coords - currentX) <= 50)
                {//too little movement
                    /*console.log*/alert('moved, but no real swipe');
                }
                else
                {
                    /*console.log*/alert('SWIIIPEEE!');
                }
            };
            if (body.addEventListener)
            {
                return body.addEventListener('touchend',tEnd,false);
            }
            body.attachEvent('ontouchend',tEnd);
        };
        if (G.removeEventListener)
        {
            body.addEventListener('touchstart',tStart,false);
            return G.removeEventListener('load',load,false);
        }
        body.attachEvent('ontouchstart',tStart);
        return G.detachEvent('onload',load);
    };
    if (G.addEventListener)
    {
        return G.addEventListener('load',load,false);
    }
    return G.attachEvent('onload',load);
}(this));