一、四種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);

由于觸摸會導(dǎo)致屏幕動來動去，所以可以會在這些事件的事件處理函數(shù)內(nèi)使用event.preventDefault()，來阻止屏幕的默認(rèn)滾動。
這些事件名是針對webkit內(nèi)核瀏覽器的，IE中并不叫這些。
touch事件無法獲得當(dāng)前位置所在的DOM，但是可以獲得當(dāng)前位置的坐標(biāo)，可以使用document.elementFromPoint方法獲取指定坐標(biāo)的DOM。

• 事件屬性
  • touches
    當(dāng)前屏幕上所有觸摸點的列表；
  • targetTouches
    所綁定的當(dāng)前對象上所有觸摸點的列表；
• changedTouches
  觸發(fā)事件時改變的觸摸點的集合。
  舉個例子：有兩個元素div1和div2，只有div2綁定了touchstart事件，第一次放下一個手指在div2上，觸發(fā)了touchstart事件，這個時候，三個集合的內(nèi)容是一樣的，都包含這個手指的touch。再放下兩個手指一個在div1上，一個在div2上，這個時候又會觸發(fā)事件，但changedTouches里面只包含第二個第三個手指的信息，因為第一個沒有發(fā)生變化，而targetTouches包含的是在第一個手指和第三個在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三個手指。

二、mouse事件

• 當(dāng)我們點擊一個元素時會觸發(fā)mouse事件：

  • mouseover
    鼠標(biāo)指針移動到指定的對象上時發(fā)生，與所綁定的DOM無關(guān)。
  • mousemove
    當(dāng)指針設(shè)備在元素上移動時被觸發(fā)。
  • mousedown
    鼠標(biāo)按鈕被按下時觸發(fā)。
  • mouseup
    鼠標(biāo)按鈕被釋放彈起時觸發(fā)。

• 事件屬性

  • event.clientX/Y
    獲取的是觸發(fā)點相對于瀏覽器可視區(qū)域左上角距離，不隨頁面滾動而改變。

• 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ā)事件時，鼠標(biāo)所在的DOM。

• touch屬性
  clientX/Y、pageX/Y、screenX/Y與mouse事件的相同，target最初觸發(fā)事件的DOM。

當(dāng)我們點擊一個元素時，觸發(fā)的事件順序是：touchstart=>touchend=>mouseover=>mousemove=>mousedown=>mouseup=>click。

三、currentTarget與Target

Target在事件的目標(biāo)階段， currentTarget在事件流的捕獲、目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時候，兩者才是一樣的。當(dāng)處于捕獲和冒泡階段的時候，target指向被單擊的對象，currentTarget指向當(dāng)前事件活動的對象（一般為父級）。