touch事件小結(jié)

yvonne 發(fā)布于2019-08-21 10:50 / 452人閱讀

摘要：原文目前支持良好的三種觸摸事件。位于當(dāng)前元素上的手指動作的列表涉及當(dāng)前事件的手指動作的列表。例如，在一個事件中，這將是移開手指觸摸事件位置信息這些信息可以判斷拖動的方向下拉刷新上拉加載。

原文：http://zhuxinyong.com/2016/03/08/touch%E4%BA%8B%E4%BB%B6%E5%B0%8F%E7%BB%93/
目前支持良好的三種觸摸事件：1. touchstart 2. touchmove 3. touchend。

ToucheEvent -> TouchList -> Touch
觸摸事件屬性（TouchEvent）：
Represents an event that occurs when the state of touches on the surface changes.

觸摸事件列表（TouchList）：

Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.

touches 當(dāng)前位于屏幕上的所有手指動作的列表。

targetTouches 位于當(dāng)前 DOM 元素上的手指動作的列表

changedTouches 涉及當(dāng)前事件的手指動作的列表。例如，在一個 touchend 事件中，這將是移開手指
觸摸事件（Touch）：

Represents a single point of contact between the user and the touch surface.

位置信息：

clientX/Y

pageX/Y

screenX/y
這些信息可以判斷拖動的方向（下拉刷新／上拉加載）。

GPU云服務(wù)器云服務(wù)器 touch事件 -touch touch php @touch

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86284.html

相關(guān)文章

移動web開發(fā)問題和優(yōu)化小結(jié)

摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結(jié)。關(guān)于和鼠標(biāo)事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來越高，網(wǎng)站功能越來越好，效果越來越炫酷，這就要求我們產(chǎn)品質(zhì)量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發(fā)問題和優(yōu)化小結(jié)

摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結(jié)。關(guān)于和鼠標(biāo)事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來越高，網(wǎng)站功能越來越好，效果越來越炫酷，這就要求我們產(chǎn)品質(zhì)量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0
移動端開發(fā)知識小結(jié)

摘要：標(biāo)簽相關(guān)能優(yōu)化移動瀏覽器的顯示。會導(dǎo)致添加到主屏后以全屏模式打開頁面時出現(xiàn)黑邊如果不是響應(yīng)式網(wǎng)站，不要使用或者禁用縮放。這一對事件可以用來檢測元素上的單擊和雙擊。 meta標(biāo)簽相關(guān) viewport：能優(yōu)化移動瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站，不要使用initial-scale或者禁用縮放。適配 iPhone 6 和 iPhone 6plus 則需要寫：大部分 4.7~...

Freeman 2019-08-20 11:21 評論0 收藏0
H5下拉刷新和上拉加載實現(xiàn)原理淺析

摘要：原文鏈接前言在移動端網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如，庫等。原文鏈接：justrockit.top 前言在移動端H5網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現(xiàn)原理的闡述。實現(xiàn)原理下拉刷新...

X1nFLY 2019-08-22 16:23 評論0 收藏0
H5下拉刷新和上拉加載實現(xiàn)原理淺析

摘要：原文鏈接前言在移動端網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如，庫等。原文鏈接：justrockit.top 前言在移動端H5網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現(xiàn)原理的闡述。實現(xiàn)原理下拉刷新...

Bmob 2019-08-29 15:04 評論0 收藏0