我只是在我的 iPod 上的 Safari 上浏览 Facebook，每当您在 Messenger 中并且您在任何消息上向右/向左滑动时，都会出现一个删除按钮。
有人可以指导我并可能告诉我它是如何在 html/JS/jQuery 中完成的吗？
非常感谢！
【问题讨论】：
标签： javascript jquery html ios ajax
我不知道 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));
【讨论】：
document.getElementById('test')代替document.body，这样就可以了，对吧？
document.getElementById，您将只接收直接在该元素或其子元素上发生的触摸事件。通过使用document.body，您将能够委托该事件。至于小提琴：我会研究它，但我有点时间紧迫。 Here's an example using some of the same techniques，仍在进行中，但 here's the script 在后面，适用于 iOS 和 android，以及 IE > 6、FF、chrome、safari 等...
我为此创建了一个 Javascript 库 - 今天刚刚发布！ https://github.com/ankane/swipeout
【讨论】：
这将允许用户滑动和点击；
这与 bootstrap 一起用于绑定的样式和剔除（但这是可选的，在此演示中未使用）。
在 iOS 和 Android（Cordova 应用程序）上工作和测试。 由于我的数组包含重要信息，我决定滑动以显示删除按钮，然后允许用户单击此按钮。这将作为用户决定删除它。
此外，我使用此代码不只是用于删除，只是适当地设置插件按钮的样式（'btn-success' 等）。
所需的 jquery 库扩展是 'jquery.event.move' (https://github.com/stephband/jquery.event.move)
HTML：
<div class="col-xs-12 btn-group-vertical">
<!-- ko foreach: Alert -->
<a class="btn btn-lg btn-default mySwipe" role="button" style="height:45px;float:left;">This is also test</a>
<button class="btn btn-lg btn-danger btn-addOn" style="width:0px;display:none;right:0px;height:45px;margin-top:0px;padding:10px;">Delete Alert</button>
<!-- /ko -->
</div>
JS：
每次数组更改时都会调用此函数 (swipeButton('.mySwipe');)
// THIS FUNCTION APPLIES THE SWIPE DELETE LOGIC TO LIST ITEMS (.btn)
function swipeButton(elementIdentifier) {
$(elementIdentifier).on('movestart', function (e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
else {
if (e.distX < 0) {
// Left
$(e.currentTarget).css('border-bottom-right-radius', '0px');
$(e.currentTarget).css('border-top-right-radius', '0px');
}
}
}).on('move', function (e) {
var item = $(e.currentTarget);
var total = item.parent().width();
var btn = $(e.currentTarget.nextElementSibling);
if (e.distX < 0) {
// Left
var distance = e.distX * -1;
distance = distance > 120 ? 120 : distance;
btn.show();
// Move
var itemWidth = total - distance;
var btnWidth = distance < 35 ? 0 : distance;
if (btnWidth == 0) {
btn.hide();
itemWidth = total;
}
item.css('width', itemWidth + 'px');
btn.css('width', btnWidth + 'px');
}
else {
//Right
var distance = e.distX;
distance = distance > 120 ? 120 : distance;
var currentWidth = item.width();
// Move
var thisMove = e.deltaX == 0 ? distance : e.deltaX;
var itemWidth = currentWidth + thisMove;
itemWidth = itemWidth > total ? total : itemWidth;
var btnWidth = total - itemWidth;
btnWidth = btnWidth < 14 ? 0 : btnWidth;
if (btnWidth == 0) {
btn.hide();
itemWidth = total;
}
item.css('width', itemWidth + 'px');
btn.css('width', btnWidth + 'px');
}
}).on('moveend', function (e) {
var total = $(e.currentTarget).parent().width();
var itemWidth = $(e.currentTarget).width();
if (itemWidth == total) {
// End Right
$(e.currentTarget).css('border-bottom-right-radius', '');
$(e.currentTarget).css('border-top-right-radius', '');
var btn = $(e.currentTarget.nextElementSibling);
btn.hide();
}
});
}
此代码的工作演示：http://jsfiddle.net/3d9n9cdo/5/
【讨论】：