2012-04-18 63 views
0

由於事件的觸發時間滯後300毫秒,我有一組綁定到'vmouseup'而不是'click'的列表項。jQuery Mobile - 如何滾動與綁定到vmouseup的項目列表

我的問題是,當我使用'vmouseup'或'vmousedown'綁定每個列表項時,我顯然無法通過一些調整來滾動列表。

我的列表元素看看這個:

$(liElem).bind('vmouseup', function() { 
     scrollToTop(); 
     showDetails(); 
}); 
  1. 我怎麼能不滾動觸發列表元素上vmouseup事件列表?
  2. 我記得在SOFlow的某處讀到vmouseup不一定總是被觸發,所以應該用vmousedown來代替嗎?

我想我知道答案的#1有做unbind()/die()stopPropagation()輕微的可能性,並preventDefault()

修訂ANSWER

在的iOS 4.2.1(iPod Touch的)似乎是與門檻方法錯誤的東西。如果向上滾動(從頂部向下滑動),但一旦向下滾動(從向下滑動到向上)距離,頁面Y通常會給出錯誤值並觸發事件,則一切正常。例如,如果將閾值設置爲30像素,並且從手機的底部滑動到頂部,則仍然可以觸發該事件。使用jQueryMobile 1.1.0 RC1和jQuery 1.7.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/

+0

哇..那很快..謝謝!知道你潛伏在角落裏,碧玉。並且該代碼在iPhone和Android中運行正常? – micadelli 2012-04-18 23:59:07

+0

我正在爲你做一個演示,但請注意,我只是更新了答案,以包含'vmousedown'事件來重置標誌。 – Jasper 2012-04-19 00:00:08

+0

@micadelli下面是演示:http://jsfiddle.net/RB6mp/1/ – Jasper 2012-04-19 00:01:12

相關問題