jQuery Mobile – 如何滚动列表，其中包含绑定到 vmouseup 的项目

Question

我有一组列表项绑定到"vmouseup"而不是"click"，因为事件的触发时间有 300 毫秒的延迟。

我的问题是当我使用"vmouseup"或"vmousedown"来绑定每个列表项时，我显然无法通过一些调整来滚动列表。

我的列表元素看起来是关于这个的：

 $(liElem).bind('vmouseup', function () {
      scrollToTop();
      showDetails();
 });

1. 如何在不触发列表元素上的 vmouseup 事件的情况下滚动列表？
2. 我记得在SOFlow的某处读到，vmouseup不一定总是被触发，所以我应该使用vmousedown吗？

我想我知道#1的答案与unbind()/die()有关，stopPropagation()和preventDefault()的可能性很小

更新的答案

在iOS 4.2.1（iPod Touch）中，阈值方法似乎存在一些问题。如果向上滚动（从上到下滑动），一切正常，但是当向下滚动（从下向下滑动到上）时，距离 pageY 通常会给出错误值并触发事件。例如，如果阈值设置为 30 像素，并且我从手机的最底部滑动到顶部，它仍然可以触发事件。使用 jQueryMobile 1.1.0 RC1 和 jQuery 1.7.1。

Answer 1

var did_user_swipe = false;
$(liElem).bind('vmousedown', function () {
    did_user_swipe = false;
}).bind('vmouseup', function () {
    if (!did_user_swipe) {
        scrollToTop();
        showDetails();
    }
}).bind('vmousemove', function () {
    did_user_swipe = true;
});

这将设置一个默认false的标志。当用户在轻扫动作中拖动手指时，该标志设置为true。当标志设置为 true 时，vmouseup 事件处理程序将不会运行。

这是一个演示：http://jsfiddle.net/RB6mp/

更新

您还可以为轻扫/单击行为设置阈值，从而减少绑定到 vmousemove 事件的需要：

var coords    = [0, 0],
    threshold = 100;//in pixels
$(liElem).bind('vmousedown', function (event) {
    //when the mouse is clicked, set the coordinates of that event
    coords = [event.pageX, event.pageY];
}).bind('vmouseup', function (e) {
    //when the mouse is released, calculate the distance from the start of the click to the end
    var distance = Math.sqrt(Math.pow(coords[0] - e.pageX, 2) + Math.pow(coords[1] - e.pageY, 2));
    //if the distance of the "swipe" is longer than the `threshold` set
    if (distance > threshold) {
        alert('Swipe (' + Math.floor(distance) + 'px)');
    } else {
        alert('Click (' + Math.floor(distance) + 'px)');
    }
});​

这是一个演示：http://jsfiddle.net/RB6mp/4/