JS 行動端的 Touch 事件使用-js教程-PHP中文網

首頁

web前端

js教程

JS 行動端的 Touch 事件使用

Guanhui

May 21, 2020 am 09:42 AM

js touch

JS 行動端的 Touch 事件使用

隨著智慧型手機和平板電腦的普及, 越來越多的人用行動裝置瀏覽網頁，我們平常在pc瀏覽器上用的滑鼠事件，例如：click, mouseover等，已經無法滿足行動裝置觸控螢幕的特點，觸控時代的到來，離不開那些觸控事件。

觸控事件包含4個介面。

TouchEvent

代表當觸摸行為在平面上變化的時候發生的事件.

Touch

代表使用者手指與觸摸平面間的一個接觸點.

TouchList

代表一系列的Touch; 一般在使用者多個手指同時接觸觸控平面時使用此介面.

DocumentTouch

包含了一些建立Touch物件與TouchList物件的便利方法.

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

TouchEvent介面可以回應基本觸控事件（如單一手指點擊），它包含了一些特定的事件，

事件類型：

##touchstart : 觸控開始（手指放在觸控螢幕上）

touchmove : 拖曳（手指在觸控螢幕上移動）

touchend : 觸控結束（手指從觸控螢幕移開）

touchenter ：移動的手指進入一個dom元素。

touchleave ：移動的手指離開一個dom元素。

還有一個touchcancel，是在拖曳中斷時候觸發。

事件屬性：

altKey : 此屬性傳回布林值，表示在指定的事件發生時，Alt 鍵是否處於按下狀態， event.altKey=true|false|1| 0

type : 觸摸時觸發的事件類型，例如touchstart

每個觸控事件都包含了三個觸控屬性清單：

1. touches：目前位於螢幕上的所有手指觸摸點的一個清單。

2. targetTouches：目前元素物件上所有觸控點的清單。

3. changedTouches：涉及當前事件的觸控點的清單。

它們都是一個數組，每個元素代表一個觸控點。

每個觸控點對應的Touch都有三對重要的屬性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件發生的位置對於螢幕的偏移量，clientX/clienYt和pageX/pageY都代表事件發生位置對應對象的偏移量，不過區別是clientX/clientY不包括對象捲動而隱藏的偏移量，而pageX/pageY包括物件滾動而隱藏的偏移量。移開螢幕的那個觸控點，只會包含在changedTouches清單中，而不會包含在touches 和targetTouches 清單中，所以changedTouches在項目當中會比較常用。

範例：

<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(&#39;dom&#39;);
    dom.addEventListener(&#39;touchstart&#39;, onTouchStart, false);
}
</script>
</body>

登入後複製

控制台輸出如下：

JS 行動端的 Touch 事件使用

觸碰事件跟滑鼠事件的觸發先後順序：

Touchstart > toucheend > mousemove > mousedown > mouseup > click

很多情況下觸控事件跟滑鼠事件會同時觸發（目的是為了讓沒有對觸控設備優化的程式碼仍然可以在觸控裝置上正常運作），如果使用了觸控事件，可以呼叫event.preventDefault()來阻止滑鼠事件被觸發。而手指在螢幕上移動touchmove則不會觸發滑鼠事件和點擊事件,在touchmove事件中加入preventDefault, 可以禁止瀏覽器滾動螢幕，也不會影響點擊事件的觸發。

JS 行動端的 Touch 事件使用

以上事件，都係統內建的，可以直接使用，透過這些內建事件，可以組合成很多非原生的多點觸控手勢touch手勢。

Hammer.js是一個輕量級的JavaScript庫，能讓你的網站輕鬆實現觸控事件, 它依賴於jQuery，用來控制觸控裝置上的多點觸控特性。

官網：

http://hammerjs.github.io/

#多點觸控的實現，想了解更多可以參考：

http://www.cnblogs.com/iamlilinfeng/p/4239957.htm

zepto是輕量級相容juqery的函式庫，適用於行動裝置開發, 具體使用方法，可參考官網,

#http://zeptojs.com/

zepto touch 是用於單點手勢觸發的一個touch事件模組。

Touch.js 下載網址：

https://github.com/madrobby/zepto/blob/master/src/touch.js

#先看zepto的touch模組實作：

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

登入後複製

touch 模組綁定事件touchstart, touchmove, touchend 到document上，然後透過計算事件觸發的時間差，位置差來實現自定義的tap，swipe事件。

手机上也有click事件，从触摸到响应click事件，有会300的毫秒的延迟，原因在于:

"Apple 准备发布iphone的时候，为了解决手机上web页面太小的问题，增加了双击屏幕放大的功能，(double tap to zoom )，当用户触摸屏幕的时候，浏览器不知道用户是要double tap还是要click，所以浏览器在第一次tap事件后会等300ms来判断到底是double tap还是click ，如果在300ms以内点击的话，会以为是double tap，反之是click。"

去掉click事件 300ms 的方法：

(1) 在meta里，加 user-scalable=no 可以阻止双击放大，（缺点：部分浏览器支持）

(2) 使用fastclick.js 它利用多touchstart touchmove 等原生事件的封装，来实现手机上的各种手势，比如tap， swipe 等,

下载地址 https://github.com/ftlabs/fastclick

调用很简单：

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

登入後複製

缺点：文件量有点大，为了解决一小延迟的问题，有点得不偿失。

自定义事件

 // 创建事件对象
  var obj = new Event(&#39;sina&#39;);
  var elem = document.getElementById(&#39;dom&#39;);
  //监听sina事件
  elem.addEventListener(&#39;sina&#39;, function(e){
    console.log(e);
  },false);
  //分发sina事件
  elem.dispatchEvent(obj);

登入後複製

另外一个创建事件对象的方法是通过CustomEvent，相比于Event的好处是，它可以给处理事件的函数，自定义detail值，这在实际开发中，可能会经常用到。

  // 创建事件对象
  var obj = new window.CustomEvent(&#39;sina&#39;, {
      detail: {&#39;name&#39;: &#39;lily&#39;}
  });
  var elem = document.getElementById(&#39;dom&#39;);
  //监听sina事件
  elem.addEventListener(&#39;sina&#39;, function(e){
    // 可以接收到创建事件时，传入的detail值。
    console.log(e. detail);  // {&#39;name&#39;: &#39;lily&#39;}
  },false);
  //分发sina事件
  elem.dispatchEvent(obj);

登入後複製

创建自定义事件，一个兼容性较好的函数：

JS 行動端的 Touch 事件使用

zepto tap “点透”问题

Zepto 的tap事件是通过document绑定了touchstart和touchend事件实现，如果绑定tap方法的dom元素在tap方法触发后会隐藏、而“隐藏后，它底下同一位置正好有一个dom元素绑定了click的事件, 而clic事件有300ms延迟，触发click事件。则会出现“点透”现象。

解决方案：

1 fastclick.js

它的实际原理是在目标元素上绑定touchstart ,touchend事件，然后在touchend这个库直接在touchend的时候就触发了dom上的click事件而替换了本来的触发时间，touch事件是绑定到了具体dom而不是document上,所以e.preventDefault是有效的，可以阻止冒泡，也可以阻止浏览器默认事件。

http://www.cnblogs.com/yexiaochai/p/3442220.html

2、利用fastclick的事件原理，直接写一段，采用 e.preventDefault(); 阻止“默认行为”，将事件绑定到dom元素上，缺点在于不能使用事件代理。

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

登入後複製

3. 在事件捕获阶段，如果时间差，位置差，均小于指定的值，就阻止冒泡和默认click事件的触发。

JS 行動端的 Touch 事件使用

4．用户点击的时候“弹出”一个顶层DIV，屏蔽掉所有事件传递，然后定时自动隐藏, 这个方法比较巧妙。

推荐教程：《PHP教程》

以上是JS 行動端的 Touch 事件使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1246

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

JS 行動端的 Touch 事件使用

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題