【問題記錄】解決滑動沖突問題 - 監聽滑動事件，阻止滑動事件冒泡

業務場景：

父容器是一個支援左右滑動切換的Tab頁，子元件是一個支援左右滾動的div内容展示。當左右滑動子元件内容時，會同時觸發Tab滑動切換，與預期不符。

解決方案：

如果是vue架構的話，可以在該子元件節點上加一個監聽屬性即可：@touchend.stop

解決思路很簡單，就是監聽對應元素element的滑動事件，禁止向上冒泡即可。

<div class="demo" @touchend.stop>
  <!-- 滑動内容 -->
</div>      

如果是其他架構的話，在了解實作原理之後，可以嘗試以下代碼：

const targetElement = document.getElementById('targetElement');
targetElement.addEventListener('touchmove', function (e) {
  // 檢視事件對象
  // console.log(e);
  // 阻止預設事件
  // e.preventDefault();
  // 阻止冒泡事件
  e.stopPropagation();
});      

參考&學習：

怎麼阻止touchstart touchend事件冒泡