移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动

• 使用移动端设备监听手指触摸事件时发现有时候无法触发touchend事件，因此在监听touchend事件时通过 阻止页面默认事件 event.preventDefault()来实现事件监听，但是发现页面的滚动事件也被阻止了。怎么样既不会阻止页面滚动又可以监听手指抬起事件？
• 通过查看资料发现元素上绑定了touchcancel和touchend两个事件：
  1、长按后不移动直接抬起手指，触发的是touchcancel；
  2、长按后轻轻移动一下再抬起手指，触发的是touchend；
• 针对这细微的变化实际上用户很难去辨别，因此给元素这两个事件绑定同一个方法，此时不再需要阻止页面默认事件也可以触发手指抬起动作：

<div
    class="chat"
    id="chat"    
    @touchcancel="handleTouchEnd" 
    @touchend="handleTouchEnd"
  ></div>