在开发时"tochstart","touchend"无法被触发的解决办法

先说原因：今天我在写翻页功能时，加了如下代码

 this.rendition = this.book.renderTo("reader", {
        width: innerWidth,
        height: innerHeight,
        methods: "default"
      });

  this.rendition.on("touchstart", event => {
 	console.log(event)
  });

  this.rendition.on("touchend", event => {
   console.log(event)
}
当我去控制台去查看时，发现无论怎么点击都没有用，tochstart和touchend居然没有被触发。当时我网上查找了好久，按理说代码没有错误啊。
当我把touchstart和tochend的代码改成如下代码时，竟然奇迹般的可以用了
    var event = new Event('touchstart');
   this.rendition.on('touchstart', function (e) { console.log(e) }, false);
   this.rendition.dispatchEvent(event);
   这还不是最气人的，当我把这些代码完全改回之前的样子时
   即改成了    
    this.rendition.on("touchstart", event => {
 	console.log(event)
  });
   ，之前无法被触发的又能触发了。
   唉...我是个刚刚入前端的菜鸟，也不知道这是啥原因。希望大佬可以解释一下，为什么之前不能被触发的touchstart又能被触发了。
   还有一个就是怎么解决`Unable to preventDefault inside passive event listener due to target being treated as passive.`
   在下面添加这些代码即可


      document.addEventListener('touchstart', function(event) {
    
    if (event.cancelable) {
        
        if (!event.defaultPrevented) {
            event.preventDefault();
        }
    }
}, false);