資訊專欄INFORMATION COLUMN
摘要：公司有觸控屏設(shè)備采用系統(tǒng)，普通網(wǎng)頁(yè)打開(kāi)后觸屏操控如滑動(dòng)網(wǎng)頁(yè)沒(méi)有效果，需在網(wǎng)頁(yè)代碼中添加處理事件網(wǎng)頁(yè)的手勢(shì)滑動(dòng)效果。所以在調(diào)用事件時(shí)，要注意禁止縮放和滾動(dòng)。其他地方基本與鼠標(biāo)事件是一致的。
公司有觸控屏設(shè)備采用WIN7系統(tǒng)，普通網(wǎng)頁(yè)打開(kāi)后觸屏操控如滑動(dòng)網(wǎng)頁(yè)沒(méi)有效果，需在網(wǎng)頁(yè)代碼中添加JS處理touch事件網(wǎng)頁(yè)的手勢(shì)滑動(dòng)效果。當(dāng)然首先需要webkit內(nèi)核支持touch事件。
以下內(nèi)容引用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上時(shí)觸發(fā)
touchmove: //手指在屏幕上滑動(dòng)式觸發(fā)
touchend: //手指離開(kāi)屏幕時(shí)觸發(fā)
touchcancel: //系統(tǒng)取消touch事件的時(shí)候觸發(fā)，這個(gè)好像比較少用
每個(gè)觸摸事件被觸發(fā)后，會(huì)生成一個(gè)event對(duì)象，event對(duì)象里額外包括以下三個(gè)觸摸列表
touches: //當(dāng)前屏幕上所有手指的列表
targetTouches: //當(dāng)前dom元素上手指的列表，盡量使用這個(gè)代替touches
changedTouches: //涉及當(dāng)前事件的手指的列表，盡量使用這個(gè)代替touches
這些列表里的每次觸摸由touch對(duì)象組成，touch對(duì)象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點(diǎn)相對(duì)瀏覽器窗口的位置
pageX / pageY: //觸摸點(diǎn)相對(duì)于頁(yè)面的位置
screenX / screenY: //觸摸點(diǎn)相對(duì)于屏幕的位置
identifier: //touch對(duì)象的ID
target: //當(dāng)前的DOM元素
注意：
手指在滑動(dòng)整個(gè)屏幕時(shí)，會(huì)影響瀏覽器的行為，比如滾動(dòng)和縮放。所以在調(diào)用touch事件時(shí)，要注意禁止縮放和滾動(dòng)。
1.禁止縮放
通過(guò)meta元標(biāo)簽來(lái)設(shè)置。
2.禁止?jié)L動(dòng)
preventDefault是阻止默認(rèn)行為，touch事件的默認(rèn)行為就是滾動(dòng)。
event.preventDefault();
以下引用自http://blog.csdn.net/jiangcs520/article/details/17564065
很多博文中稱touch的三個(gè)事件都有targetTouches，touches以及changedTouches對(duì)象列表，其實(shí)不然，touchend事件中應(yīng)該是只有個(gè)changedTouches觸摸實(shí)例列表的，而且這里說(shuō)明一下，回調(diào)函數(shù)的event只是一個(gè)普通的object對(duì)象，實(shí)際上event中有一個(gè)originalEvent屬性，這才是真正的touch事件，這個(gè)事件中才存在著上訴三個(gè)觸摸實(shí)例列表，這三個(gè)實(shí)例存儲(chǔ)了觸摸事件的位置等等屬性，類似于鼠標(biāo)事件。其他地方基本與鼠標(biāo)事件是一致的。簡(jiǎn)單介紹一下這三個(gè)觸摸列表，touches是在屏幕上的所有手指列表，targetTouches是當(dāng)前DOM上的手指列表，所以當(dāng)手指移開(kāi)觸發(fā)touchend事件時(shí)，event.originalEvent是沒(méi)有這個(gè)targetTouches列表的，而changedTouches列表是涉及當(dāng)前事件的列表，例如touchend事件中，手指移開(kāi)。
根據(jù)以上2篇文章處理網(wǎng)頁(yè)，對(duì)body進(jìn)行pageY軸計(jì)算滑動(dòng)距離，進(jìn)行頁(yè)面滾動(dòng)；
在touchend事件中使用originalEvent.changedTouches[0].target屬性判斷鏈接目標(biāo)進(jìn)行點(diǎn)擊。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79369.html
摘要：移動(dòng)端觸屏滑動(dòng)的效果其實(shí)就是圖片輪播，在的頁(yè)面上很好實(shí)現(xiàn)，綁定和等事件來(lái)完成。處理事件能跟蹤到屏幕滑動(dòng)的每根手指。禁止?jié)L動(dòng)是阻止默認(rèn)行為，事件的默認(rèn)行為就是滾動(dòng)。可惜在此玩了一個(gè)小時(shí)也沒(méi)有看見(jiàn)一列火車經(jīng)過(guò)，只好繼續(xù)趕往東烏旗。 移動(dòng)端觸屏滑動(dòng)的效果其實(shí)就是圖片輪播，在PC的頁(yè)面上很好實(shí)現(xiàn)，綁定click和mouseover等事件來(lái)完成。但是在移動(dòng)設(shè)備上，要實(shí)現(xiàn)這種輪播的效果，就需要用到...
摘要：使用了很多的滾動(dòng)條插件，如這次說(shuō)說(shuō)，支持水平滾動(dòng)條，支持文本區(qū)和文檔頁(yè)面滾動(dòng)條。，兼容所有的桌面瀏覽器。，兼容移動(dòng)設(shè)備黑莓手機(jī)和芒果。，兼容所有觸摸設(shè)備平板電腦窗口接口。，簡(jiǎn)單的安裝和激活不破壞代碼。 使用了很多的滾動(dòng)條插件，如Iscroll,swiper,這次說(shuō)說(shuō)Nicescroll 1，支持水平滾動(dòng)條! 2，支持div,IFrames,文本區(qū)和文檔頁(yè)面滾動(dòng)條。 3，兼容所有的桌面...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)開(kāi)發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)Web開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)Web開(kāi)發(fā)需要注意...
閱讀 2964·2021-09-22 15:43
閱讀 5287·2021-09-06 15:02
閱讀 908·2019-08-29 13:55
閱讀 1742·2019-08-29 12:58
閱讀 3138·2019-08-29 12:38
閱讀 1309·2019-08-26 12:20
閱讀 2317·2019-08-26 12:12
閱讀 3392·2019-08-23 18:35
