fix(useLongPress): deal with touchcancel event

[CYeas]

[中文版模板 / Chinese template]

🤔 This is a ...

• [ ] New feature
• [x] Bug fix
• [ ] Site / documentation update
• [ ] Demo update
• [ ] TypeScript definition update
• [ ] Bundle size optimization
• [ ] Performance optimization
• [x] Enhancement feature
• [ ] Internationalization
• [ ] Refactoring
• [ ] Code style optimization
• [ ] Test Case
• [ ] Branch merge
• [ ] Other (about what?)

🔗 Related issue link

💡 Background and solution

In some mobile cases（like app with webview）, the cancel event may be triggered, such as being interrupted by the client or sliding to the native tab. At this time, the longpress should be cancelled.

this mr add touchcancel event listener to cancel

📝 Changelog

Language	Changelog
🇺🇸 English	add touchcancel event listener to cancel timer
🇨🇳 Chinese	添加touchcancel event listener 去取消计时中的事件

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• [x] Doc is updated/provided or not needed
• [x] Demo is updated/provided or not needed
• [x] TypeScript definition is updated/provided or not needed
• [x] Changelog is provided or not needed

[CLAassistant]

All committers have signed the CLA.

[liuyib]

How do you verify this change? Can you provide an online demo? thx

[CYeas]

How do you verify this change? Can you provide an online demo? thx

Providing an online demo may be difficult because I don't know of any websites that offer the ability to simulate an Android environment online. "touchCancel" depends on the mobile environment. if necessary, I can provide the corresponding Android code or APK.

the content below is web demo and gif. We can see that the long press function was triggered during the sliding, which is an unexpected behavior. Users do not want to long press just to slide (moveThreshold has been set, see sandbox for details). At the same time, we can see that the touch cancel event was triggered, so this commit cancels the corresponding event at this point.

sandbox: https://codesandbox.io/s/sharp-voice-qshv92?file=/src/App.js

gif:

[liuyib]

@CYeas Thx for your feedback, I'm trying to mock your GIF in codesandbox: https://codesandbox.io/s/ahooks-pr-2133-demo-99kfcq?file=/App.tsx, but even if I checked it on my phone, it doesn't reproduce the problem.

So, I need you provide the corresponding Android code and APK, very grateful.

[CYeas]

@CYeas Thx for your feedback, I'm trying to mock your GIF in codesandbox: https://codesandbox.io/s/ahooks-pr-2133-demo-99kfcq?file=/App.tsx, but even if I checked it on my phone, it doesn't reproduce the problem.

So, I need you provide the corresponding Android code and APK, very grateful.

@liuyib

here is repo and apk build: https://github.com/CYeas/AndroidTabDemo https://github.com/CYeas/AndroidTabDemo/releases/tag/0.0.1

It should be noted that swiper is not on the web end, but on the native, which is also the reason why touch-cancel is triggered.

[liuyib]

@CYeas Thank you very much, I will check it in my spare time.

[liuyib]

Hi @CYeas, thx for your apk and gradle source code.

In my xiaomi 6 phone（MIUI v11.0.5, Android v9）, the problem in your GIF can't be reproduced.

I guess this problem may only can be reproduced in lower version of Android phone. So, are you recording GIF in a virtual machine? can you try it in a real machine again? If you reproduce this problem in a real machine, please tell me your Android version, very grateful.

[CYeas]

hi @liuyib I reproduced the issue on my phone, and it is indeed slightly more difficult on high-performance devices because we set a relatively small movement cancellation threshold

vivo iqoo neo5, android 11， Snapdragon 870

this is screen shoot：

https://user-images.githubusercontent.com/15172194/233090469-8383fa5f-f14c-4e34-9e28-5d3732e8a81c.mp4

[liuyib]

@CYeas Thx for your vedio, I'll try my best to reproduce, waitting for my good news.

[liuyib]

I got it. There is almost a hundred percent to produce it when you slide tab very very quickly.

[liuyib]

I got an error log when build gradle project:

So, I need your help.

Please replace https://qshv92.csb.app/ to https://sui4jg.csb.app/ in your source code, and build a new apk, very very thx. @CYeas

Take your time, you can do it in your free time.

[CYeas]

@liuyib here: app-debug.apk.zip

by the way, Based on your screenshot, I guess there might be some issues with your SDK home path settings. and if you have any other problems, plz feel free to let me know

[liuyib]

@CYeas Good news, I verified this problem, but we should update this PR according to: https://codesandbox.io/s/sui4jg?file=/src/useLongPress.tsx:3999-4061

After my verification, If we don't add targetElement.addEventListener("touchcancel", onEnd);, this problem is still exist.

You can also verify it by the latest apk. This apk will load my demo in codesandbox

If you got a different result, plz let me known. If you got a same result, plz let me known also, thx

[liuyib]

@CYeas 有空了可以验证下上一条评论吗？我验证的需要加上这行代码才可以解决当前 PR 提出的问题：

[LJJCherry]

这个问题为什么没解决呢？