JS touch

一個月沒寫博客了，感受空嘮嘮的，有多好想寫的，今天全都給補上吧，記錄最近這個月的收穫

https://blog.csdn.net/sinat_19327991/article/details/73823874

關於dom 的 觸摸事件

首先說關於Dom Event ： 標識在DOM 中發生的任何事件

如何使用：

1.註冊監聽器

1.dom.addEventListener('click', function(){alert('Hello world');}, false);

// 參數：1. 事件類型 2.回調函數 3.冒泡 false/捕獲 true （冒泡與捕獲自行百度）

2. <button onclick="test();">

function test(){
    // event  返回值特殊處理後的能夠直接使用
   event.preventDefault()      
}

3. dom.onclick = function(event){alert('Hello world');};

2.調用event 的方法或者屬性 （可參考 https://developer.mozilla.org/zh-CN/docs/Web/API/Event）

 

關於屬性與方法就很少說了，用的比較多的方法（或者見的比較多的）：

（注意的一點是：event.cancelable 」 若是該事件的 cancelable 屬性爲 false, 則該事件的監聽器沒法阻止默認行爲, 調用 preventDefault將產生錯誤「」）

1.preventDefault：

取消默認要作的事情，好比說你在寫了一個checkbox，若是你監聽了click方法而且在該方法用調用了preventDefault，那麼就會阻止默認行爲，或者你能夠在你的監聽方法里加上別的操做~好比alert一下 ~

2.stopPropagation:

阻止事件繼續傳播（冒泡、捕獲）

好比：（樣式啥的就不寫了，能看明白就好）

<div onclick="test1()">
    <div onclick="test2()">
    </div>
</div>

點擊裏層的div 會發生test2事件，默認是冒泡，而後test1 也會執行，若是咱們在test2 方法中加入stopPropagation ，那麼test1 就不會執行，也就是不會傳到test1。

 

言歸正傳：TouchEvent

也就是觸摸事件（主要跟移動端比較匹配）

下面這段話摘自MDN：

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用於描述一個或多個觸點，使開發者能夠檢測觸點的移動，觸點的增長和減小，等等。

每 個 Touch 對象表明一個觸點; 每一個觸點都由其位置，大小，形狀，壓力大小，和目標 element 描述。 TouchList 對象表明多個觸點的一個列表.

 

也就是說touch 會返回一個list，觸點數。

touch類型分爲touchstart、touchmove、touchend、touchcancel

也就是開始、移動、結束、取消（取消用的可能比較少，主要是遇到某個某個插隊致使中斷等等）

直接上代碼：下面是轉載域 CSDN 豆i漿 的博文：

function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener('load',load, false); 

http://www.javashuo.com/article/p-dpvndxry-gr.html

 

其實，通常狀況下，咱們都是想獲得的就是touch list 也就是touchEvent.touches

touch對象的屬性（經常使用）：

1. screenX ： 觸點相對於屏幕左邊沿的的X座標

2.screenY：觸點相對於屏幕上邊沿的的Y座標

3.clientX：觸點相對於可見視區(visual viewport)左邊沿的的X座標. 不包括任何滾動偏移

4.clientY：觸點相對於可見視區(visual viewport)上邊沿的的Y座標. 不包括任何滾動偏移

5.pageX：觸點相對於HTML文檔左邊沿的的X座標. 當存在水平滾動的偏移時, 這個值包含了水平滾動的偏移

6.pageY：觸點相對於HTML文檔上邊沿的的Y座標. 當存在垂直滾動的偏移時, 這個值包含了垂直滾動的偏移.

7.force：手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數.

8.target：當這個觸點最開始被跟蹤時(在 touchstart 事件中), 觸點位於的HTML元素.

 

用的比較多的可能就是clientX，clientY了吧~ 獲取可見區域的座標，而後記錄start 的座標在move和end時進行相關操做~

若是有興趣的或者想更深刻了解的同窗能夠去MDN 查找相關資料~