如何防止iOS 5中touchmove事件的默認行爲？

我有一個基於網絡的應用程序，其中包含一個用戶可以用手指上下滾動的組件。我使用事件的preventDefault方法來防止觸摸移動在iOS設備上移動整個屏幕的默認行爲。如何防止iOS 5中touchmove事件的默認行爲？

不幸的是，這似乎不再適用於我剛剛升級到今天早上的iOS 5。我不得不假設這只是在iOS 5中完成的，但我還沒有能夠找到提供指示的資源。

謝謝！

更新＃1：我一直無法找到我的具體問題的答案，但我能夠調整我的代碼，使用-webkit溢出滾動樣式（設置爲「touch 「），並實現時髦的慣性滾動功能（其中內容的滾動速度取決於滑動的速度，如果碰到邊界則會」回彈「回彈。我現在還有一個奇怪的問題，出於某種奇怪的原因，溢出滾動行爲有時會混淆，因此您必須將您的手指左右拖動到包含元素上以使其內容上下移動，但我還沒有能力弄清楚爲什麼會發生這種情況 - 有沒有人有任何想法???

來源

2011-10-13 natlee75

首先，我可以驗證e.preventDefault（）禁用iOS 5中的所有滾動使用下面的代碼：

document.ontouchmove = function(e){ e.preventDefault(); }

然而不幸的是，這將禁用溢出滾動：滾動div的。（如果任何人有一個解決方案，使內部元素滾動啓用，請分享。）

關於更新＃2，我注意到有一個可滾動的元素嵌套在另一個可滾動元素（包括頁面本身）時出現奇怪的行爲。有時設備在用戶想要滾動的元素上猶豫不決。特別是我已經注意到使用position：fixed的這個問題。我的解決方案是確保身體有100％的高度，可滾動的元素在可能的情況下使用position：absolute。

來源

2011-10-14 06:55:46

也許你可以做一些邏輯檢查，像'如果（$（e.currentTarget）的.css（ '溢出'）= '滾動'！）電子.preventDefault（）;'。由於document.ontouchmove會在可觸發元素的ontouchmove之後觸發，因此可以執行'el.ontouchmove = function（）{allowScroll = true}'，然後讓'document.ontouchmove'使用該值來確定操作，然後設置該值假。 –

@BrianNickel感謝您的提示。這是朝着正確的方向邁出的一步，它允許您防止以元素爲單位直接滾動（包括直接在主體上滾動），但是如果用戶觸摸移動已滾動到其可滾動邊緣的可滾動元素它仍然會滾動身體（顯示下面的灰色亞麻布）。也許唯一的辦法是解釋touchmove的方向，並檢查元素是否在其可滾動範圍的邊緣？ –

@RyanRapp感謝您的回覆。我可能沒有足夠清楚地描述我正在談論的行爲。在iOS 4中，我會在帶有溢出的touchmove事件處理程序的元素（比如DIV）中使用e.preventDefault（），這樣我就可以通過基於元素內手指移動的絕對定位來移動內容。現在，當我嘗試將整個頁面移動到沒有足夠內容滾動的頁面時，e.preventDefault（）會阻止此操作，但它不會滾動頁面，而是四處移動，以便您可以看到Safari的背景紋理。 – natlee75

我發現了一個非常簡單的解決方案。當事件觸及允許滾動的元素時，只需在事件上添加標誌即可。在文檔上的事件監聽器只檢查是否設置了標誌且僅當標誌未設置停止事件：

this.$scrollableEl.on('touchmove', function(event){ 
    event.comesFromScrollable = true; 
    //when you have containers that are srollable but 
    //doesn't have enough content to scroll sometimes: 
    //event.comesFromScrollable = el.offsetHeight < el.scrollHeight; 
}) 

$document.on('touchmove', function(event){ 
    if(!event.comesFromScrollable){ 
     event.preventDefault() 
    } 
    })

你也可以使用event.stopImmediatePropagation代替，所以你不需要在文件的事件監聽元素，但是這打破zepto.js tap在我的情況：

this.$scrollableEl.on('touchmove', function(event){ 
    event.stopImmediatePropagation() 
})

來源

2012-06-15 09:32:11

謝謝！奇蹟般有效！我按照我剛剛添加自定義數據屬性的方式進行了修改，並且如果可用的滾動不會停止。這樣我們可以保存一個eventlistener :) –

如何防止iOS 5中touchmove事件的默認行爲？

回答

相關問題