Ionic中事件响应内调用对象/方法失败问题排查

这个问题我太熟悉了——当你用原生的addEventListener绑定事件回调时，回调函数里的this会指向触发事件的DOM元素（也就是你的object1），而不是DetailPage的实例，自然就拿不到popoverCtrl了。下面给你几个靠谱的解决办法：

方法1：用箭头函数绑定事件回调 #

箭头函数会继承外层作用域的this，把绑定事件的代码改成这样就能直接解决上下文问题：

ionViewDidLoad() {
  ...
  object1.addEventListener("mousedown", (ev) => this.mouseDown(ev), false);
}

这样mouseDown方法里的this就会牢牢指向DetailPage实例，正常调用this.popoverCtrl.create()完全没问题。

方法2：给mouseDown方法绑定固定this #

如果你不想改事件绑定的写法，也可以用bind把this强制绑定到组件实例上：

ionViewDidLoad() {
  ...
  object1.addEventListener("mousedown", this.mouseDown.bind(this), false);
}

不过要注意，bind会返回一个新函数，要是之后需要移除这个事件监听，得提前保存这个新函数的引用，不然没法精准移除。

方法3：改用Ionic/Angular自带的事件绑定（推荐） #

既然是在Ionic项目里，更推荐用框架原生的事件绑定方式，完全不用操心this的问题。如果object1是模板里的元素，直接在模板里添加事件绑定：

<!-- 假设object1是模板中的某个元素 -->
<div #object1 (mousedown)="mouseDown($event)">点击触发弹窗</div>

之后组件类里就不用手动调用addEventListener了，直接保留mouseDown方法即可，框架会自动帮你处理好上下文。

最后提个小细节：如果用了原生的addEventListener，记得在组件销毁的钩子（比如ionViewWillUnload）里移除事件监听，避免内存泄漏哦。

内容的提问来源于stack exchange，提问作者David