WINDOWS系統下觸屏設備網頁實現滾動的touch事件處理

jhhfft 發布于2019-08-19 18:15 / 3075人閱讀

摘要：公司有觸控屏設備采用系統，普通網頁打開后觸屏操控如滑動網頁沒有效果，需在網頁代碼中添加處理事件網頁的手勢滑動效果。所以在調用事件時，要注意禁止縮放和滾動。其他地方基本與鼠標事件是一致的。

公司有觸控屏設備采用WIN7系統，普通網頁打開后觸屏操控如滑動網頁沒有效果，需在網頁代碼中添加JS處理touch事件網頁的手勢滑動效果。當然首先需要webkit內核支持touch事件。

以下內容引用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用

每個觸摸事件被觸發后，會生成一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對于頁面的位置
screenX / screenY: //觸摸點相對于屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素

注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
通過meta元標簽來設置。

2.禁止滾動
preventDefault是阻止默認行為，touch事件的默認行為就是滾動。
event.preventDefault();

以下引用自http://blog.csdn.net/jiangcs520/article/details/17564065

很多博文中稱touch的三個事件都有targetTouches，touches以及changedTouches對象列表，其實不然，touchend事件中應該是只有個changedTouches觸摸實例列表的，而且這里說明一下，回調函數的event只是一個普通的object對象，實際上event中有一個originalEvent屬性，這才是真正的touch事件，這個事件中才存在著上訴三個觸摸實例列表，這三個實例存儲了觸摸事件的位置等等屬性，類似于鼠標事件。其他地方基本與鼠標事件是一致的。簡單介紹一下這三個觸摸列表，touches是在屏幕上的所有手指列表，targetTouches是當前DOM上的手指列表，所以當手指移開觸發touchend事件時，event.originalEvent是沒有這個targetTouches列表的，而changedTouches列表是涉及當前事件的列表，例如touchend事件中，手指移開。

根據以上2篇文章處理網頁，對body進行pageY軸計算滑動距離，進行頁面滾動；
在touchend事件中使用originalEvent.changedTouches[0].target屬性判斷鏈接目標進行點擊。

GPU云服務器云服務器下觸屏 touch事件 java滾動條的事件 jquery的事件處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79369.html

JS移動客戶端--觸屏滑動事件及js手機拖拽效果

摘要：移動端觸屏滑動的效果其實就是圖片輪播，在的頁面上很好實現，綁定和等事件來完成。處理事件能跟蹤到屏幕滑動的每根手指。禁止滾動是阻止默認行為，事件的默認行為就是滾動。可惜在此玩了一個小時也沒有看見一列火車經過，只好繼續趕往東烏旗。移動端觸屏滑動的效果其實就是圖片輪播，在PC的頁面上很好實現，綁定click和mouseover等事件來完成。但是在移動設備上，要實現這種輪播的效果，就需要用到...

joyqi 2019-08-20 15:19 評論0 收藏0
jquery插件Nicescroll 3(非常類似IOS原生的滾動條) （轉）

摘要：使用了很多的滾動條插件，如這次說說，支持水平滾動條，支持文本區和文檔頁面滾動條。，兼容所有的桌面瀏覽器。，兼容移動設備黑莓手機和芒果。，兼容所有觸摸設備平板電腦窗口接口。，簡單的安裝和激活不破壞代碼。使用了很多的滾動條插件，如Iscroll,swiper,這次說說Nicescroll 1，支持水平滾動條! 2，支持div,IFrames,文本區和文檔頁面滾動條。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0