删除 Typescript 的事件侦听器不起作用

Posted 2023-03-13

【中文标题】删除 Typescript 的事件侦听器不起作用

【英文标题】：Remove Event Listener for Typescript does not work

【发布时间】：2018-11-12 11:58:36

【问题描述】：

我在我的 ionic 3 聊天应用程序中尝试了 import SMS from '@ionic-native/sms';。但是document.removeEventListener('onSMSArrive'); 不起作用。

这是我正在使用的软件包

"@ionic-native/sms": "^4.3.0",
"@ionic-native/core": "^4.3.0",
"cordova-sms-plugin": "^0.1.11",

问题是当我第一次访问我的页面时，它可以正常工作并在我收到短信到手机时接收消息。 但是，如果我返回另一个页面并返回该页面，我会在我的函数中收到两次相同的消息。我认为事件侦听器没有删除，当我再次导航到该页面时，另一个侦听器正在添加到文档。

这是我的代码

我在页面加载时添加事件监听器，并在页面卸载时删除它。

public ionViewWillEnter() 
    this.smsService.startMessageListner();


public ionViewWillLeave() 
    this.smsService.stopMessageListner();

这是我的服务中的startMessageListner() 和stopMessageListner() 函数。

public startMessageListner()

    --- some works do here ---
    this.startListner();


public startListner()

    this.recieveMessage().then((message) => 
        --- receives message here and when after 
            navigating multiple times I receives 
            multiple same messages here---
    


public recieveMessage() 

    if (!window.SMS)  alert('SMS plugin not ready'); return; 

    window.SMS.startWatch(function() 
        console.log('Watching');
    , function() 
        console.log('Not Watching');
    );

    this.promise = new Promise((resolve, reject) => 
        document.addEventListener('onSMSArrive', this.resolveMessage(resolve));
    );

    return this.promise;


public stopMessageListner()

    --- some works do here ---
    this.stopReciveMessage();


public stopReciveMessage()

    // ***This one also not works***
    // document.removeEventListener('onSMSArrive', (event)=>
    //     window.SMS.stopWatch(function() 
    //         console.log('Stop Watching');
    //     , function() 
    //         console.log('Not Stop Watching');
    //     );
    // );

    document.removeEventListener('onSMSArrive');

    window.SMS.stopWatch(function() 
        console.log('Stop Watching');
    , function() 
        console.log('Not Stop Watching');
    );

请帮我解决这个问题。这个问题浪费了我整个星期。仍然没有运气:(

===更新为 cmets===

所有给定的链接都说我必须在删除事件侦听器时传递完全相同的函数。就我而言，当我调用document.addEventListener 时，我将this.resolveMessage(resolve) 与resolve 参数一起传递。所以我已经尝试了如下，仍然没有解决。

public recieveMessage() 

    --same content as above--

    let self = this; // I added this line for safe side
    this.promise = new Promise((resolve, reject) => 
        self.resolve = resolve;
        document.addEventListener('onSMSArrive', self.resolveMessage(resolve),false);
    );

    return this.promise;


public stopReciveMessage()

    document.removeEventListener('onSMSArrive', this.resolveMessage(this.resolve),false);

    window.SMS.stopWatch(function() 
        console.log('Stop Watching');
    , function() 
        console.log('Not Stop Watching');
    );

2。 对于 1 中的相同 recieveMessage()。

    public stopReciveMessage()
    
        document.removeEventListener('onSMSArrive', this.resolveMessage,false);

        window.SMS.stopWatch(function() 
            console.log('Stop Watching');
        , function() 
            console.log('Not Stop Watching');
        );
       

3。 对于 1 中的相同 recieveMessage()。

    public stopReciveMessage()
    
        let self = this;
        this.promise = new Promise((resolve, reject) => 
            document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
            window.SMS.stopWatch(function() 
                console.log('Stop Watching');
            , function() 
                console.log('Not Stop Watching');
            );
        );
    

4。 对于 1 中的相同 recieveMessage()。

    public stopReciveMessage()
    
        let self = this;
        this.promise = (resolve, reject) => 
            document.removeEventListener('onSMSArrive', self.resolveMessage(resolve),false);
            window.SMS.stopWatch(function() 
                console.log('Stop Watching');
            , function() 
                console.log('Not Stop Watching');
            );
        ;
    

谢谢

【问题讨论】：

你在哪里调用方法stopRecieveMessage？发送消息后立即尝试使用this.promise.unsubscribe();。

感谢您的评论，我在 stopMessageListner() 中调用了 stopRecieveMessage。无论如何，离开我的页面时，我收到此错误“this.promise.unsubscribe is not a function”。

为了移除一个事件监听器，你必须传递通过addEventListener传递的完全相同的函数，而不是具有相同内容的其他函数。跨度>

removeEventListener is not working的可能重复

其他可能的目标：***.com/questions/46704065/…***.com/questions/43624322/…***.com/questions/10444077/…

【参考方案1】：

我同意在 typescript 中删除事件监听器真的很痛苦。我已经在 Vue 中这样解决了：

class App 

    mylistener:EventListener

    created()
        this.mylistener = (e:Event) => this.logMessage(e,"hello")
        window.addEventListener('click', this.mylistener);
    

    destroyed()
        window.removeEventListener("click", this.mylistener)
    

    logMessage(e:Event, str:String)
        console.log("click event was called")
    

这假定在创建和删除组件时调用了“created”和“destroyed”函数。首先检查您是否可以让一个基本示例正常工作，如果可以，请查看如何将其应用到您的 SMS 库 - 该库可能有其自身的问题。