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

最新推荐文章于 2024-05-11 14:37:58 发布

qq_27036043

最新推荐文章于 2024-05-11 14:37:58 发布

阅读量4.3k

点赞数 2

分类专栏：前端开发问题文章标签： touchstart tochend 解决问题

本文链接：https://blog.csdn.net/qq_27036043/article/details/86664672

版权

前端开发问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了在前端开发中，触屏事件touchstart和touchend为何在特定情况下无法触发的问题。作者通过调整事件监听器的实现方式，解决了事件不响应的困扰，并分享了解决方案及遇到的Unable to preventDefault inside passive event listener警告的处理方法。

摘要由CSDN通过智能技术生成

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

 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);