javascript - 为什么触摸事件监听器似乎阻止了在 iphone 或 ipad 上选择谷歌翻译语言？

Question

我对谷歌翻译小部件有疑问。使用 iphone 或 ipad 时，我无法选择要翻译成的语言。我可以点击第一个按钮，但是当语言菜单出现并且我点击一种语言时，菜单立即消失并且点击注册在菜单后面的元素上。这个问题只发生在非常特殊的情况下，我将在下面概述。

• 下面描述的问题已在 iphone4 ios5.0.1 上观察到 和 ipad2 ios 7.0.6。
• 这个问题在 firefox 29.0.1、chrome 上没有被观察到 31.0.1650.63 米或 Internet Explorer 11。
• 问题的 JSfiddle http://jsfiddle.net/LfkLy/1/
• 不需要 Reveal.js 来重现此问题。

当我在带有 reveal.js 的页面上使用小部件时，我第一次注意到这个问题经过大量尝试后，我发现如果我在 reveal.js 配置中将 touch 设置为 false 或注释掉下面的行，小部件正常工作。

dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );

我决定删除 reveal.js 触摸事件并使用 hammer.js 和 hammer jquery 插件实现我自己的触摸事件。 我用过这样的东西

// hammer.js
$('.reveal').hammer().on("tap", function() 
{                       
    console.log("tapped with a hammer");
}); 

执行完上面的代码，问题又出现了。我修改了代码并仅使用 hammer.js 进行了尝试，得到了相同的结果。无论我将触摸监听器附加到页面的哪一部分，都会出现问题。出于好奇，我用 jquery 尝试了一下，结果还是一样。

//Test with jquery    
$('.reveal').on("touchstart", function() 
{ 
   console.log("touched with jquery");
});

有趣的是，当我使用点击功能时，小部件没有问题。

$('.reveal').on('click',function()
{
    console.log("jquery click worked");
});

尽管触摸事件和问题之间存在明显的联系，但我并未排除这可能与 CSS 有某种关联的可能性。 更新: 特别是，我开始怀疑它可能与 :hover 和触摸事件有关。

问题

1. 为什么会这样？
2. 我怎样才能在监听诸如 touchstart 之类的触摸事件的同时仍然使用谷歌翻译 iphone/ipad 上的小部件？

我的谷歌翻译小部件代码

<div class="custom-translate" id="google_translate_element"></div>


<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},'google_translate_element');
}

(function() {
  var googleTranslateScript = document.createElement('script');
  googleTranslateScript.type = 'text/javascript';
  googleTranslateScript.async = true;
  googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( googleTranslateScript );
})();
</script>       

Answer 1

问题是，对于您选择的布局，Google 翻译小部件会在新的 iframe 中打开语言选项“下拉菜单”，并且(长话短说)hammer.js 不能很好地处理 iframe 内容(大概reveal.js 有同样的问题)。

您可以尝试一些非常复杂的方法来解决涉及处理事件和 iframe 内容的问题，但更简单的解决方案是使用另一种不使用 iframe 的布局，例如将 SIMPLE 替换为 HORIZONTAL 或 VERTICAL

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

我在这里更新了你最近的 fiddle :http://jsfiddle.net/LfkLy/10/