移動web(三)touch事件詳解

移動web(三)touch事件詳解

1、touch事件裏面包含三個事件

  • touchstart 手指碰到屏幕的時候觸發,不管當前有多少隻手指,觸發一次
  • touchmove 手指在屏幕上移動的時候不斷觸發 ,連續觸發,通常我們再滑屏頁面,
    會調用event的preventDefault()可以阻止默認情況的發生:阻止頁面滾動
  • touchend 當手指離開屏幕的時候觸發,觸發一次

所有的touch事件必須通過addEventListener去綁定,用on是沒有作用的

每個觸摸事件都包括了三個觸摸列表,是一個數組,一共有三個手指列表changedTouches、targetTouches、touches
1)changedTouches當前最新的手指列表
2)targetTouches當前目標上所有的手指列表
3)touches屏幕上所有的手指列表
【注意】changedTouches 在end事件裏面可以拿到,但是targetTouches touches是拿不到。
changedTouches頁面上最新更改的所有觸摸,在touchend裏面觸發,只有touchend的纔可以獲取even手指座標,在touchend事件的時候event只會記錄changedtouches

2、支持性

所有被測試的瀏覽器都支持touchstart、touchend和touchmove事件。規範提供了額外的三個觸摸事件,但被測試的瀏覽器沒有支持它們:
1)touchenter:移動的手指進入一個DOM元素。
2)toucheleave:移動手指離開一個DOM元素。
3)touchcancel:觸摸被中斷(實現規範)。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章