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

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

• 以下描述的问题已在iphone4上观察到 和ipad2ios 7.0.6
• 这个问题在Firefox29.0.1 chrome上没有被观察到 31.0.1650.63 m或internet explorer 11
• 这是一个棘手的问题
• 重新创建此问题不需要Reveal.js

我第一次注意到这个问题是在我在一个带有leaver.js的页面上使用这个小部件时，在反复尝试之后，我发现如果我在leaver.js配置中将touch设置为false或注释掉下面的行，这个小部件就会正常工作

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

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

// 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");
});

有趣的是，当我使用click函数时，小部件没有问题

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

尽管触摸事件与问题之间存在明显的联系，但我并没有否认这可能与CSS有关更新：特别是，我开始怀疑它可能与：悬停和触摸事件有关

问题

为什么会这样

我如何在收听touchstart等触摸事件的同时仍然使用google translate iphone/ipad上的widget

我的谷歌翻译小部件代码

<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>       

函数googleTranslateElementInit（）{
新的google.translate.TranslateElement（{pageLanguage:'en'，layout:google.translate.TranslateElement.InlineLayout.SIMPLE，autoDisplay:false}，'google_translate_element'）；
}
（功能（）{
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）；
})();

问题在于，对于您选择的布局，Google Translate小部件在新的iframe中打开语言选项“下拉列表”，并且（长话短说）hammer.js不能很好地处理iframe内容（可能reveal.js也有同样的问题）

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

SIMPLE

替换为

水平

或

垂直

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

我在这里更新了您最近的小提琴：