移動與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並冒泡到父元素上。