Events youtube api removeEventListener不工作

我可以很好地添加事件

addEventListener("onStateChange", "handleStateChange");

但当试图删除该事件时，它不会

removeEventListener("onStateChange", "handleStateChange");

---

每当我暂停/播放视频时，仍会调用

handleStateChange

。有没有人遇到过这种情况并找到了解决方案？或者API上有bug吗？

我认为问题在于YouTube API的播放器对象没有

removeEventListener

方法。请记住，当您调用

addEventListener

时，您是将其作为构造的youtube播放器对象的方法，而不是使用定义为DOM元素方法的方法（为了让开发人员更熟悉，youtube API选择将其方法命名为相同的方法）

过去对其他人有效的一个建议是，当您处于可能需要删除事件侦听器的情况时，您只需重新定义您的状态更改回调。。。比如：

handleStateChange = function() {};

---

这对于我的应用程序来说是个问题，我为YouTube播放器对象制作了一种事件发射代理

用法（其中

player

是YouTube Iframe API播放器实例）：

类别：

/**
 * YouTubeEventProxy
 * Quick and dirty hack around broken event handling in the YouTube Iframe API.
 * Events are renamed, dropping the "on" and lower-casing the first character.
 * Methods 'on', 'off', etc. are supported, as-provided by event-emitter.
 * See also:  https://stackoverflow.com/q/25880573/362536
 * 
 * Brad Isbell <brad@audiopump.co>
 * License: MIT <https://opensource.org/licenses/MIT>
 */

import EventEmitter from 'event-emitter';

// From: https://developers.google.com/youtube/iframe_api_reference#Events
const ytApiEvents = [
  'onApiChange',
  'onError',
  'onPlaybackQualityChange',
  'onPlaybackRateChange',
  'onReady',
  'onStateChange'
];

export default class YouTubeEventProxy extends EventEmitter {
  constructor(player) {
    super();

    this.player = player;

    ytApiEvents.forEach((eventName) => {
      player.addEventListener(
        eventName,
        this.emit.bind(
          this,
          eventName.substr(2, 1).toLowerCase() + eventName.substr(3)
        )
      );
    });

  }
}

/**
*YouTubeEventProxy
*在YouTube Iframe API中快速而肮脏地破解了损坏的事件处理。
*事件被重命名，删除“on”并将第一个字符的大小写降低。
*事件发射器提供的方法支持“开”、“关”等。
*另见：https://stackoverflow.com/q/25880573/362536
* 
*布拉德·伊斯贝尔
*执照：麻省理工学院
*/
从“事件发射器”导入EventEmitter；
//发件人：https://developers.google.com/youtube/iframe_api_reference#Events
常数ytApiEvents=[
“onApiChange”，
“onError”，
“onPlaybackQualityChange”，
“onPlaybackRateChange”，
“onReady”，
“onStateChange”
];
导出默认类YouTubeEventProxy扩展事件发射器{
构造器（玩家）{
超级（）；
this.player=player；
ytApiEvents.forEach（（eventName）=>{
player.addEventListener(
事件名称，
这个.emit.bind(
这
eventName.substr（2,1）.toLowerCase（）+eventName.substr（3）
)
);
});
}
}

---

这是

事件发射器

包：

但是，变更日志说，该方法是在2014年4月28日添加的。如果我仍然无法使其工作，我相信您建议的方法会工作。谢谢你。。。我想我在变更日志中遗漏了这一点；但你完全正确，它根本不起作用；我尝试了API公开的所有不同事件。您可能需要提交一个bug:。。。在任何情况下，这个解决方案都应该满足您的需求，直到工程师们解决它。在2018年仍然是一个问题，在2019年3月仍然是一个问题。事件上面的建议不起作用。另外需要注意的是，有时候YouTube播放器会在同一个同步代码块中触发多个事件。例如，当调用

nextVideo（）

时，会触发暂停和未启动状态更改。例如，如果使用react挂钩，这可能会导致头痛。可以通过将

this.emit.bind…

-行更改为：

e=>setTimeout（（）=>this.emit（eventName.substr（2,1）.toLowerCase（）+eventName.substr（3,e），0）来解决此问题。

/**
 * YouTubeEventProxy
 * Quick and dirty hack around broken event handling in the YouTube Iframe API.
 * Events are renamed, dropping the "on" and lower-casing the first character.
 * Methods 'on', 'off', etc. are supported, as-provided by event-emitter.
 * See also:  https://stackoverflow.com/q/25880573/362536
 * 
 * Brad Isbell <brad@audiopump.co>
 * License: MIT <https://opensource.org/licenses/MIT>
 */

import EventEmitter from 'event-emitter';

// From: https://developers.google.com/youtube/iframe_api_reference#Events
const ytApiEvents = [
  'onApiChange',
  'onError',
  'onPlaybackQualityChange',
  'onPlaybackRateChange',
  'onReady',
  'onStateChange'
];

export default class YouTubeEventProxy extends EventEmitter {
  constructor(player) {
    super();

    this.player = player;

    ytApiEvents.forEach((eventName) => {
      player.addEventListener(
        eventName,
        this.emit.bind(
          this,
          eventName.substr(2, 1).toLowerCase() + eventName.substr(3)
        )
      );
    });

  }
}