rendition绑定事件的时候报错

来源:4-3 阅读器翻页功能实现

诺森德的凛冽寒风

2019-01-20

Unable to preventDefault inside passive event listener due to target being treated as passive.

写回答

2回答

Sam

2019-01-20

回复 核桃夹过的门:造成这个问题的主要原因是事件将passive属性设置为true,但这个是由epubjs完成的,我们无法进行修改,这里以touchstart举例,说明Rendition事件绑定的大致流程:

1、通过EventEmitter进行Rendition原型链扩展,添加on方法

EventEmitter(Rendition.prototype);

2、用户调用Rendition.on()方法绑定事件,该方法来源于event-emitter库,该方法接收两个参数:type和listener,前者是事件类型,后者是事件回调方法,on方法会在Rendition对象上扩展一个__ee__属性,我们的type和listener会以k-v形式保存在__ee__对象上:

on = function (type, listener) {
 var data;
 callable(listener);
 if (!hasOwnProperty.call(this, '__ee__')) {
  data = descriptor.value = create(null);
  defineProperty(this, '__ee__', descriptor);
  descriptor.value = null;
 } else {
  data = this.__ee__;
 }
 if (!data[type]) data[type] = listener;
 else if (typeof data[type] === 'object') data[type].push(listener);
 else data[type] = [data[type], listener];
 return this;
};

3、在iframe界面中添加touchstart事件,在managers/views/iframe.js下绑定touchstart事件:

h.element.addEventListener("touchstart", emitter);

4、事件触发时,会调用emitter方法,该方法会调用根据事件类型,到__ee__上找到对应的方法,并进行执行,实际调用的是event-emitter库中的emit方法

emit = function (type) {
  // ...
}

通过上述分析我们可以看到,我们无法对passive属性进行修改,所以无法使用event.preventDefault()

0
0

Sam

2019-01-20

你好,将event.preventDefault()注释即可

0
1
诺森德的凛冽寒风
不需要阻止默认事件吗
2019-01-20
共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构,完整项目流程

1610 学习 · 1951 问题

查看课程