android - touchmove事件如何禁止頁面滾動
天蓬老师
天蓬老师 2017-05-16 13:35:17
0
1
810

最近在H5頁面上做了一個類似ios的 AssistiveTouch 的功能:一個懸浮的小掛件,可以在頁面上移動,不用的時候自動貼邊吸附。

出現的問題:

在Android手機上,移動小掛件的時候,頁面會跟著滾動。

因為 chrome瀏覽器為了提高頁面滾動的流暢度,在新的chrome瀏覽器上,touchmove事件裡不能用 event.preventDefault() 阻止頁面滾動了。

新的綁定事件,需要這樣處理 (加了一個 passive: false 屬性)

document.addEventListener('click', onClick, {passive: false, capture: false});

但是我用的react,綁定監聽直接用的

<p onTouchmove={::this.touchmove} >
</p>

touchmove 移動掛件的時候,怎麼阻止頁面滾動那?

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(1)
Ty80

直接來。資料在這裡

您的事件處理程序將傳遞 SyntheticEvent 的實例,SyntheticEvent 是瀏覽器本機事件的跨瀏覽器包裝器。它與瀏覽器的本機事件具有相同的接口,包括 stopPropagation() 和 PreventDefault(),但事件在所有瀏覽器中的工作方式相同。

如果您發現由於某種原因需要底層瀏覽器事件,只需使用nativeEvent屬性即可取得。每個 SyntheticEvent 物件都具有以下屬性:

雷雷
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板