一乘瓤、四種touch觸摸事件
- 事件
- touchstart
手指放在屏幕上時觸發(fā)。
window.addEventListener('touchstart', function() {
nstartY = e.targetTouches[0].screenY;
nStartX = e.targetTouches[0].screenX;
}, false)
- touchmove
手指在屏幕滑動時持續(xù)觸發(fā)
window.addEventListener("touchmove", handleMove, false);
- touchend
手指離開屏幕時觸發(fā)
window.addEventListener("touchend", handleEnd, false);
- touchcancle
系統(tǒng)取消touch事件時觸發(fā)策泣，在觸摸序列被取消時觸發(fā)衙傀，用的較少。
window.addEventListener("touchend", handleCancle, false);
由于觸摸會導致屏幕動來動去萨咕，所以可以會在這些事件的事件處理函數(shù)內(nèi)使用event.preventDefault()统抬，來阻止屏幕的默認滾動。
這些事件名是針對webkit內(nèi)核瀏覽器的危队，IE中并不叫這些聪建。
touch事件無法獲得當前位置所在的DOM，但是可以獲得當前位置的坐標茫陆，可以使用document.elementFromPoint方法獲取指定坐標的DOM金麸。
- 事件屬性
- touches
當前屏幕上所有觸摸點的列表； - targetTouches
所綁定的當前對象上所有觸摸點的列表簿盅；
- touches
- changedTouches
觸發(fā)事件時改變的觸摸點的集合挥下。
舉個例子：有兩個元素div1和div2，只有div2綁定了touchstart事件桨醋，第一次放下一個手指在div2上棚瘟，觸發(fā)了touchstart事件，這個時候喜最，三個集合的內(nèi)容是一樣的偎蘸，都包含這個手指的touch。再放下兩個手指一個在div1上瞬内，一個在div2上迷雪，這個時候又會觸發(fā)事件，但changedTouches里面只包含第二個第三個手指的信息遂鹊，因為第一個沒有發(fā)生變化振乏，而targetTouches包含的是在第一個手指和第三個在div2上的手指集合，touches包含屏幕上所有手指的信息秉扑，也就是三個手指。
二、mouse事件
-
當我們點擊一個元素時會觸發(fā)mouse事件：
- mouseover
鼠標指針移動到指定的對象上時發(fā)生舟陆，與所綁定的DOM無關(guān)误澳。 - mousemove
當指針設(shè)備在元素上移動時被觸發(fā)。 - mousedown
鼠標按鈕被按下時觸發(fā)秦躯。 - mouseup
鼠標按鈕被釋放彈起時觸發(fā)忆谓。
- mouseover
-
事件屬性
- event.clientX/Y
獲取的是觸發(fā)點相對于瀏覽器可視區(qū)域左上角距離，不隨頁面滾動而改變踱承。
- event.clientX/Y
event.pageX/Y
獲取到的是相對文檔區(qū)域左上角距離倡缠，會隨著頁面滾動而改變。event.screenX/Y
獲取到的是觸發(fā)點相對于顯示屏幕左上角的距離茎活，不隨頁面的滾動而改變昙沦。event.offsetX/Y或者event.layerX/Y
獲取的是觸發(fā)點相對于被觸發(fā)dom的左上角距離。event.offsetX/Y是IE的屬性载荔，event.layerX/Y是FF的屬性盾饮。event.target
觸發(fā)事件時，鼠標所在的DOM懒熙。touch屬性
clientX/Y丘损、pageX/Y、screenX/Y與mouse事件的相同工扎，target最初觸發(fā)事件的DOM徘钥。
當我們點擊一個元素時，觸發(fā)的事件順序是：touchstart=>touchend=>mouseover=>mousemove=>mousedown=>mouseup=>click肢娘。
三呈础、currentTarget與Target
Target在事件的目標階段， currentTarget在事件流的捕獲蔬浙、目標及冒泡階段猪落。只有當事件流處在目標階段的時候，兩者才是一樣的畴博。當處于捕獲和冒泡階段的時候笨忌，target指向被單擊的對象，currentTarget指向當前事件活動的對象（一般為父級）俱病。
