如何阻止Google Translate绑定或移除其添加的事件？

最直接的方案：让Google Translate跳过菜单元素 #

给你的菜单容器或所有菜单元素加上 notranslate 类，Google Translate会自动忽略这些元素，不会对它们做DOM修改或绑定额外事件，菜单的点击事件就能正常触发了。

示例菜单HTML：

<nav class="hc-offcanvas-nav notranslate">
  <!-- 菜单内容 -->
</nav>

备选方案：等待翻译完成后重新初始化菜单 #

如果需要菜单也被翻译，就等Google Translate完成DOM修改后，重新初始化hc-offcanvas-nav。因为Google Translate的DOM操作是异步的，你可以用以下两种方式实现：

方法1：定时器延迟初始化 #

把菜单初始化代码放在定时器里，给Google Translate预留足够的DOM修改时间：

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',     
    includedLanguages: 'en,tr,ro',  
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
    autoDisplay:false 
  });
  // 延迟1秒重新初始化菜单，可根据实际加载速度调整时长
  setTimeout(() => {
    $('.hc-offcanvas-nav').hcOffcanvasNav();
  }, 1000);
}

方法2：用MutationObserver监听DOM变化 #

更精准的方式是监听Google Translate添加的元素，一旦检测到就重新初始化菜单：

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',     
    includedLanguages: 'en,tr,ro',  
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
    autoDisplay:false 
  });

  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // 检测Google Translate的核心容器是否出现
      if (document.querySelector('.goog-te-banner-frame') || document.querySelector('.goog-te-menu-frame')) {
        $('.hc-offcanvas-nav').hcOffcanvasNav();
        // 停止监听，避免重复触发
        observer.disconnect();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

为什么jQuery的.off/.unbind没用？ #

Google Translate用原生JavaScript的addEventListener绑定事件，而jQuery的.off()只能移除通过jQuery绑定的事件，对原生绑定的事件无效。而且Google Translate的事件多是匿名函数，根本没法直接用removeEventListener移除，所以这种方式不推荐。

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