javascript移動(dòng)端Touch事件的使用方法

隨著智能手機(jī)和平板電腦的普及, 越來(lái)越多的人用移動(dòng)設(shè)備瀏覽網(wǎng)頁(yè)，我們平時(shí)在pc瀏覽器上用的鼠標(biāo)事件，比如：click, mouseover等，已經(jīng)無(wú)法滿足移動(dòng)設(shè)備觸摸屏的特點(diǎn)，觸摸時(shí)代的到來(lái)，離不開(kāi)那些觸摸事件。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁(yè)制作,對(duì)服務(wù)器托管等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化排名優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

觸摸事件包含4個(gè)接口。

TouchEvent

代表當(dāng)觸摸行為在平面上變化的時(shí)候發(fā)生的事件.

Touch

代表用戶手指與觸摸平面間的一個(gè)接觸點(diǎn).

TouchList

代表一系列的Touch; 一般在用戶多個(gè)手指同時(shí)接觸觸控平面時(shí)使用這個(gè)接口.

DocumentTouch

包含了一些創(chuàng)建 Touch對(duì)象與TouchList對(duì)象的便捷方法.

（參考于 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events）

TouchEvent接口可以響應(yīng)基本觸摸事件（如單個(gè)手指點(diǎn)擊），它包含了一些具體的事件，

事件類型：

touchstart : 觸摸開(kāi)始（手指放在觸摸屏上）

touchmove : 拖動(dòng)（手指在觸摸屏上移動(dòng)）

touchend : 觸摸結(jié)束（手指從觸摸屏上移開(kāi)）

touchenter ：移動(dòng)的手指進(jìn)入一個(gè)dom元素。

touchleave ：移動(dòng)的手指離開(kāi)一個(gè)dom元素。

還有一個(gè)touchcancel，是在拖動(dòng)中斷時(shí)候觸發(fā)。

事件屬性：

altKey : 該屬性返回一個(gè)布爾值，表示在指定的事件發(fā)生時(shí)，Alt 鍵是否處于按下?tīng)顟B(tài)， event.altKey=true|false|1|0

type : 觸摸時(shí)觸發(fā)的事件類型，比如touchstart

每個(gè)觸摸事件都包括了三個(gè)觸摸屬性列表：

1. touches：當(dāng)前位于屏幕上的所有手指觸摸點(diǎn)的一個(gè)列表。

2. targetTouches：當(dāng)前元素對(duì)象上所有觸摸點(diǎn)的列表。

3. changedTouches：涉及當(dāng)前事件的觸摸點(diǎn)的列表。

它們都是一個(gè)數(shù)組，每個(gè)元素代表一個(gè)觸摸點(diǎn)。

每個(gè)觸摸點(diǎn)對(duì)應(yīng)的Touch都有三對(duì)重要的屬性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件發(fā)生的位置對(duì)于屏幕的偏移量，clientX/clienYt和pageX/pageY都代表事件發(fā)生位置對(duì)應(yīng)對(duì)象的偏移量，不過(guò)區(qū)別是clientX/clientY不包括對(duì)象滾動(dòng)而隱藏的偏移量，而pageX/pageY包括對(duì)象滾動(dòng)而隱藏的偏移量。移開(kāi)屏幕的那個(gè)觸摸點(diǎn)，只會(huì)包含在changedTouches列表中，而不會(huì)包含在touches 和targetTouches 列表中，所以changedTouches在項(xiàng)目當(dāng)中會(huì)比較常用。

示例：

<body onload="start();">
<style type="text/css">
#dom {
  width:500px;
  height:500px;
  background:black;
}
</style>
<div id="dom"></div>
<script type="text/javascript">
function onTouchStart(e){
    console.log(e);
}
function start(){
    var dom = document.getElementById('dom');
    dom.addEventListener('touchstart', onTouchStart, false);
}
</script>
</body>

控制臺(tái)輸出如下：

javascript移動(dòng)端Touch事件的使用方法

觸摸事件跟鼠標(biāo)事件的觸發(fā)先后順序：

Touchstart > toucheend > mousemove > mousedown > mouseup > click

很多情況下觸摸事件跟鼠標(biāo)事件會(huì)同時(shí)觸發(fā)（目的是為了讓沒(méi)有對(duì)觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作），如果使用了觸摸事件，可以調(diào)用event.preventDefault()來(lái)阻止鼠標(biāo)事件被觸發(fā)。而手指在屏幕上移動(dòng)touchmove則不會(huì)觸發(fā)鼠標(biāo)事件和單擊事件,在touchmove事件中加入preventDefault, 可以禁止瀏覽器滾動(dòng)屏幕，也不會(huì)影響單擊事件的觸發(fā)。

javascript移動(dòng)端Touch事件的使用方法

以上事件，都系統(tǒng)內(nèi)置的，可以直接使用，通過(guò)這些內(nèi)置事件，可以組合成很多非原生的多點(diǎn)觸摸手勢(shì)touch手勢(shì)。

Hammer.js是一個(gè)輕量級(jí)的JavaScript庫(kù)，能讓你的網(wǎng)站輕松實(shí)現(xiàn)觸控事件, 它依賴于jQuery，用來(lái)控制觸摸設(shè)備上的多點(diǎn)觸控特性。

官網(wǎng)： http://hammerjs.github.io/

多點(diǎn)觸摸的實(shí)現(xiàn)，想了解更多可以參考： http://www.cnblogs.com/iamlilinfeng/p/4239957.htm

zepto是輕量級(jí)兼容juqery的庫(kù)，適用于移動(dòng)端開(kāi)發(fā), 具體使用方法，可參看官網(wǎng), http://zeptojs.com/

zepto touch 是用于單點(diǎn)手勢(shì)觸發(fā)的一個(gè)touch事件模塊。

Touch.js 下載地址： https://github.com/madrobby/zepto/blob/master/src/touch.js

先看zepto的touch模塊實(shí)現(xiàn)：

 $(document)
     .on('touchstart ...',function(e){
              ...
             ...
              now = Date.now()
             delta = now - (touch.last || now)
              if (delta > 0 && delta <= 250) touch.isDoubleTap = true
              touch.last = now
     })
     .on('touchmove ...', function(e){
     })
     .on('touchend ...', function(e){
            ...
            if (deltaX < 30 && deltaY < 30) {
                   var event = $.Event('tap')
                 
                   touch.el.trigger(event)
            }
     })

touch 模塊綁定事件 touchstart, touchmove, touchend 到 document上，然后通過(guò)計(jì)算事件觸發(fā)的時(shí)間差，位置差來(lái)實(shí)現(xiàn)自定義的tap，swipe事件。

手機(jī)上也有click事件，從觸摸到響應(yīng)click事件，有會(huì)300的毫秒的延遲，原因在于:

"Apple 準(zhǔn)備發(fā)布iphone的時(shí)候，為了解決手機(jī)上web頁(yè)面太小的問(wèn)題，增加了雙擊屏幕放大的功能，(double tap to zoom )，當(dāng)用戶觸摸屏幕的時(shí)候，瀏覽器不知道用戶是要double tap還是要click，所以瀏覽器在第一次tap事件后會(huì)等300ms來(lái)判斷到底是double tap還是click ，如果在300ms以內(nèi)點(diǎn)擊的話，會(huì)以為是double tap，反之是click。"

去掉click事件 300ms 的方法：

(1) 在meta里，加 user-scalable=no 可以阻止雙擊放大，（缺點(diǎn)：部分瀏覽器支持）

(2) 使用fastclick.js 它利用多touchstart touchmove 等原生事件的封裝，來(lái)實(shí)現(xiàn)手機(jī)上的各種手勢(shì)，比如tap， swipe 等,

調(diào)用很簡(jiǎn)單：

$(function() {
    FastClick.attach(document.body);
});

缺點(diǎn)：文件量有點(diǎn)大，為了解決一小延遲的問(wèn)題，有點(diǎn)得不償失。

自定義事件

 // 創(chuàng)建事件對(duì)象
  var obj = new Event('sina');
  var elem = document.getElementById('dom');
  //監(jiān)聽(tīng)sina事件
  elem.addEventListener('sina', function(e){
    console.log(e);
  },false);
  //分發(fā)sina事件
  elem.dispatchEvent(obj);

另外一個(gè)創(chuàng)建事件對(duì)象的方法是通過(guò)CustomEvent，相比于Event的好處是，它可以給處理事件的函數(shù)，自定義detail值，這在實(shí)際開(kāi)發(fā)中，可能會(huì)經(jīng)常用到。

  // 創(chuàng)建事件對(duì)象
  var obj = new window.CustomEvent('sina', {
      detail: {'name': 'lily'}
  });
  var elem = document.getElementById('dom');
  //監(jiān)聽(tīng)sina事件
  elem.addEventListener('sina', function(e){
    // 可以接收到創(chuàng)建事件時(shí)，傳入的detail值。
    console.log(e. detail);  // {'name': 'lily'}
  },false);
  //分發(fā)sina事件
  elem.dispatchEvent(obj);

創(chuàng)建自定義事件，一個(gè)兼容性較好的函數(shù)：

javascript移動(dòng)端Touch事件的使用方法

zepto tap “點(diǎn)透”問(wèn)題

Zepto 的tap事件是通過(guò)document綁定了touchstart和touchend事件實(shí)現(xiàn)，如果綁定tap方法的dom元素在tap方法觸發(fā)后會(huì)隱藏、而“隱藏后，它底下同一位置正好有一個(gè)dom元素綁定了click的事件, 而clic事件有300ms延遲，觸發(fā)click事件。則會(huì)出現(xiàn)“點(diǎn)透”現(xiàn)象。

解決方案：

1 fastclick.js

它的實(shí)際原理是在目標(biāo)元素上綁定touchstart ,touchend事件，然后在touchend這個(gè)庫(kù)直接在touchend的時(shí)候就觸發(fā)了dom上的click事件而替換了本來(lái)的觸發(fā)時(shí)間，touch事件是綁定到了具體dom而不是document上,所以e.preventDefault是有效的，可以阻止冒泡，也可以阻止瀏覽器默認(rèn)事件。

2、利用fastclick的事件原理，直接寫一段，采用 e.preventDefault(); 阻止“默認(rèn)行為”，將事件綁定到dom元素上，缺點(diǎn)在于不能使用事件代理。

elem.addEventListener(touchend, function(e){
　　e.preventDefault()
},false);

3. 在事件捕獲階段，如果時(shí)間差，位置差，均小于指定的值，就阻止冒泡和默認(rèn)click事件的觸發(fā)。

javascript移動(dòng)端Touch事件的使用方法

4．用戶點(diǎn)擊的時(shí)候“彈出”一個(gè)頂層DIV，屏蔽掉所有事件傳遞，然后定時(shí)自動(dòng)隱藏, 這個(gè)方法比較巧妙。

以上就是JS 移動(dòng)端的 Touch 事件使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

當(dāng)前標(biāo)題：javascript移動(dòng)端Touch事件的使用方法
網(wǎng)頁(yè)鏈接：http://www.rwnh.cn/article12/jeshdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、微信小程序、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

javascript移動(dòng)端Touch事件的使用方法