移動與pc端的touch，mouse，click事件觸發過程

測試代碼以下：

   <div id="parent">
            parent
            <div id="child">點擊我</div>
        </div>
        
      <script>
          document.getElementById("parent").addEventListener("touchstart",function(){
              console.log("parent touchstart");
          })
          document.getElementById("parent").addEventListener("touchmove",function(){
              console.log("parent touchmove");
          })
          document.getElementById("parent").addEventListener("touchend",function(){
              console.log("parent touchend");
          })
          document.getElementById("parent").addEventListener("click",function(){
              console.log("parent click");
          })
          document.getElementById("child").addEventListener("touchstart",function(e){
              console.log("child touchstart");     
              e.preventDefault();      
          })
          document.getElementById("child").addEventListener("touchmove",function(){
              console.log("child touchmove");
          })
          document.getElementById("child").addEventListener("touchend",function(){
              console.log("child touchend");
          })
          document.getElementById("child").addEventListener("click",function(){
              console.log("child click");
          })

          document.getElementById("parent").addEventListener("mousedown",function(){
              console.log("parent mousedown");
          })
          document.getElementById("parent").addEventListener("mousemove",function(){
              console.log("parent mousemove");
          })
          document.getElementById("parent").addEventListener("mouseup",function(){
              console.log("parent mouseup");
          })
          document.getElementById("child").addEventListener("mousedown",function(){
              console.log("child mousedown");
          })
          document.getElementById("child").addEventListener("mousemove",function(){
              console.log("child mousemove");
          })
          document.getElementById("child").addEventListener("mouseup",function(){
              console.log("child mouseup");
          })

 

在PC端：

1.pc端無touch相關事件，因此touchstart,touchmove,touchend事件無響應。

2.點擊子元素，由於須要先移動到元素上因此觸發了mousemove事件並冒泡到父元素上，而後點擊，依次出發mousedown並冒泡，觸發mouseup並冒泡，觸發click並冒泡。（注意會先執行冒泡事件而後在執行下一個觸發事件）

打印以下：

 

3.在元素上拖動時，會在mousedown後執行mousemove事件並執行一次冒泡一次，最後依然會執行click事件。

4.不管點擊仍是拖動，子元素的click事件都會執行並冒泡。e.stopPropogation()和e.preventDefault()都不可阻止click事件的觸發。可是click事件的觸發必須是mousedown和mouseup在同一個元素上執行才能夠，若是元素滑動到了元素外，則不會觸發click事件。

在移動端：

1.在移動端mouse相關事件只在點擊的時候有效，若是沒有touch事件，只有mouse事件，點擊子元素時會依次觸發mousemove，mousedown，mouseup，click。若是有touch事件，點擊子元素時會依次觸發touchstart,touchend,mousemove,mousedown,mouseup,click事件。而且每個事件都會觸發父元素的相關事件。若是在子元素的touchstart或touchend事件中添加

e.preventDefault()，則點擊子元素後touchend事件後面的事件都再也不觸發。測試中發現

若是在父元素的touchstart或touchend事件中添加

e.preventDefault()，則點擊子元素後touchend事件後面的事件也都再也不觸發。

 

注意：滑動元素時在touch事件中添加e.preventDefault()後會阻止onscroll事件，會致使頁面不滾動。

2.滑動子元素時，mouse相關事件和click事件不會觸發，只會依次觸發touchstart,touchmove,touchend並冒泡到父元素上。