在Android瀏覽器中禁用touchcancel的觸發

我正在製作一個使用JavaScript觸摸事件的移動網站。事情在iOS Safari和Android版Chrome中運行良好，但股票Android瀏覽器（版本4.1.2）給我帶來了麻煩。在Android瀏覽器中禁用touchcancel的觸發

在觸摸過程中，按預期調用touchstart和touchmove事件。然而，由touchmove處理程序執行的操作之一似乎觸發了一個過早的touchcancel事件。（我不確定這是否顯着，但觸發touchcancel的操作是修改了SVG對象的viewBox屬性。）如果我註釋掉此操作，則觸摸過程將正常進行（即完成touchmove到touchend ）。

我所有的觸摸處理程序都調用preventDefault()函數，所以問題不在於此bug中描述的問題：https://code.google.com/p/android/issues/detail?id=19827。

我讀過關於調用touchcancel時有很多inconsistency among browsers。股票Android瀏覽器是唯一對我有問題的。

那裏有解決方法嗎？例如，在那裏我可以完全禁用touchcancel事件？我的另一個想法是讓touchcancel處理程序以編程方式觸發另一個事件，但我並沒有太多瞭解。任何想法，將不勝感激。

來源

2013-06-24 David G.

唉！我認爲這個問題現在已經遷移到Chrome瀏覽器！它出現在第28版中。請參閱https://code.google.com/p/chromium/issues/detail?id=260732。 –

另請參閱此帖，這似乎是相關的：http://stackoverflow.com/questions/15944197/android-browser-touchcancel-being-fired-althought-touchmove-has-preventdefault –

我遇到這個問題在Chrome瀏覽器現在，干擾使用Hammer.js。任何人都知道如何解決這個問題？ – acjay

我認爲touchcansel是特殊事件，當用戶觸摸特定行爲中的按鈕時觸發。

Ex。用戶觸摸按鈕，但並沒有將他的手指從該按鈕上的顯示中移除，而是他可以將其移動到左邊一點，並在那裏結束他的動作。在這種情況下，touchcancel會出現。

所以，如果你不想讓這個動作觸發，我認爲你必須刪除所有在android瀏覽器中與該動作相關的處理程序。

$（ '選擇'）。關（ 'touchcancel'），如果它的delefated $（ '父'）。undelegate（ 'touchcancel'， '選擇'）

我不認爲有是e.preventDefault（）的問題。只有當你點擊鏈接時，頁面纔會重新加載。點擊按鈕時可能會重新加載頁面？並且您在頁面重新加載之後等待一些操作，但實際上您可能無法理解它發生的情況。

來源

2014-02-01 10:47:56 Rantiev

[Touchcancel]（https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel）將不可避免地被瀏覽器觸發，並且嘗試取消或防止其中的默認設置不起作用意。 – andreszs

我知道這有點遲，但如果有人正面臨這個問題，here's a small jQuery extension解釋如何處理pointercancel和touchcancel事件。

基本上，如果切換到指針事件，你將能夠防止pointercancel只需使用touch-action CSS屬性與none值，只要在瀏覽器有兩種功能正確實施。（安卓5+，鉻55+，IE11，Edge等）

如果你真的必須使用傳統的觸摸事件相反，你必須實現你的touchmove事件event.preventDefault()，這將防止touchcancel從發射，但它也將完全禁用瀏覽器處理任何默認操作，如平移或點擊。

作爲最後一點，我不會使用觸摸事件+觸摸動作CSS規則，因爲touch-action最近才添加，與該指針事件相同。因此，儘管該組合可能在較新的瀏覽器中工作，但肯定在較老的（通過觸發touchcancel事件意外）中失敗。

檢查我發佈的jQuery擴展中的README，因爲它解釋了使用TouchEvent和PointerEvent接口的含義。

來源

2017-10-06 02:48:29 andreszs

如果是期運用hammer.js，您可以通過添加禁用指針的事件（這會導致這樣的問題），：在您的index.html，在裝船前hammer.js delete window.PointerEvent; ，它會忽略這些事件。
您也可以設置SUPPORT_POINTER_EVENTS = false; （v2.0.8的384行）做同樣的事情。理想情況下，開發人員可以添加關閉此功能的能力，但開源難題...

來源

2017-11-29 20:18:32

太棒了！謝謝！自從幾天以來，我一直在與Chrome（Android）touchcancel行爲抗爭，這是第一個真正解決了我的問題的解決方案，它使用了hammer.js。 – horace

你在開玩笑嗎？我無法相信這個工作。多麼瘋狂！我花了三天的時間試圖解決爲什麼我的用戶界面被掛起，這個簡單的k̶l̶u̶d̶g̶e̶修復解決了它？哇....只是....哇.... – Michael

在Android瀏覽器中禁用touchcancel的觸發

回答

相關問題