欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js的touch事件的實(shí)際引用

 更新時(shí)間：2014年10月13日 16:56:34   投稿：whsnow  
研究移動(dòng)端頁面的觸屏滑動(dòng)事件，搜索jquery 的相應(yīng)技術(shù)支持實(shí)在繁瑣，而js只需幾步簡單定義即可，下面與大家分享下js的touch事件的實(shí)際引用

一開始做前端頁面的時(shí)候，接觸的也是js，但是隨后便被簡單高效的jquery吸引過去，并一直使用至今。

而js，則被我主觀的認(rèn)為底層技術(shù)而拋棄。

直到這幾天工作需要，研究移動(dòng)端頁面的觸屏滑動(dòng)事件，搜索jquery 的相應(yīng)技術(shù)支持實(shí)在繁瑣（當(dāng)然也可能是我對jquery的理解不夠），而js只需幾步簡單定義即可。

由于對js的了解比較少，最簡單的應(yīng)用我都試了很久……下面就分享下js的touch事件的實(shí)際引用：

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

以上代碼不可避免的使用了jquery的某些東西，不使用jquery的可以忽略之。

相應(yīng)的事件有：

touchstart:當(dāng)手指觸摸屏幕時(shí)觸發(fā)；即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)。
touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)的觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()可阻止?jié)L動(dòng)。
touchend:當(dāng)手指從屏幕上移開時(shí)觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒有明確說明。

以上事件的event對象上面都存在如下屬性：
touches:表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組。
targetTouches:特定于事件目標(biāo)的Touch對象的數(shù)組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

每個(gè)Touch對象包含下列屬性：
clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。
identifier：表示觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target:觸摸的DOM節(jié)點(diǎn)坐標(biāo)

好吧，我其實(shí)也剛開始學(xué)，反正先把一些百度來的屬性記下來再說。

相關(guān)文章

  • JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】

    JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】

    這篇文章主要介紹了JS+canvas實(shí)現(xiàn)的五子棋游戲,是采用比較強(qiáng)的AI實(shí)現(xiàn)的人機(jī)大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實(shí)現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下
    2017-07-07
  • js實(shí)現(xiàn)非常簡單的焦點(diǎn)圖切換特效實(shí)例

    js實(shí)現(xiàn)非常簡單的焦點(diǎn)圖切換特效實(shí)例

    這篇文章主要介紹了js實(shí)現(xiàn)非常簡單的焦點(diǎn)圖切換特效,是一個(gè)非常簡單的js焦點(diǎn)圖切換效果,涉及javascript操作鼠標(biāo)事件與圖片的相關(guān)技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript作用域鏈?zhǔn)褂媒榻B

    JavaScript作用域鏈?zhǔn)褂媒榻B

    作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域
    2013-08-08
  • 原生js實(shí)現(xiàn)移動(dòng)小球（碰撞檢測）

    原生js實(shí)現(xiàn)移動(dòng)小球（碰撞檢測）

    這篇文章主要介紹了原生js實(shí)現(xiàn)會(huì)動(dòng)的小球，碰撞檢測功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼

    JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼

    這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)的JS特效代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2015-08-08
  • 基于RequireJS和JQuery的模塊化編程——常見問題全面解析

    基于RequireJS和JQuery的模塊化編程——常見問題全面解析

    下面小編就為大家?guī)硪黄赗equireJS和JQuery的模塊化編程——常見問題全面解析。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
    2016-04-04
  • webpack多入口打包示例代碼

    webpack多入口打包示例代碼

    這篇文章主要介紹了webpack多入口打包的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-12-12
  • 簡單了解JavaScript中常見的反模式

    簡單了解JavaScript中常見的反模式

    這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式 是指對反復(fù)出現(xiàn)的設(shè)計(jì)問題的常見的無力而低效的設(shè)計(jì)模式，俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下
    2019-06-06
  • 微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過程詳解

    微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過程詳解

    這篇文章主要介紹了微信小程序把百度地圖坐標(biāo)轉(zhuǎn)騰訊地圖坐標(biāo)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-07-07
  • js實(shí)現(xiàn)簡單圖片拖拽效果

    js實(shí)現(xiàn)簡單圖片拖拽效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單圖片拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-02-02

最新評論