0

我有一组列表项绑定到“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。

4

1 回答 1

2
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/

于 2012-04-18T23:56:04.817 回答