为什么触摸事件监听器似乎阻止iPhone或iPad上谷歌翻译语言的select？
我有一个与谷歌翻译部件的问题。 当使用iPhone或iPad时，我无法select要翻译的语言。 我可以点击第一个button，但是当语言菜单出现时，我点击一种语言，菜单立即消失，点击注册在菜单后面的元素上。 这个问题只发生在我将在下面概述的非常具体的情况下。
- 下面描述的问题已经在iphone4 ios5.0.1和ipad2 ios 7.0.6上观察到。
- 在firefox 29.0.1，chrome 31.0.1650.63 m或者Internet Explorer 11上没有发现问题。
- JSfiddle的问题在http://jsfiddle.net/LfkLy/1/
- Reveal.js不需要重新创build这个问题。
我首先注意到了这个问题，当我在一个页面上使用了这个小部件时，reveal.js经过大量的游戏后，我发现如果在reveal.jsconfiguration中将touch设置为false或者在下面注释掉了这些行，应该有。
dom.wrapper.addEventListener( 'touchstart', onTouchStart, false ); dom.wrapper.addEventListener( 'touchmove', onTouchMove, false ); dom.wrapper.addEventListener( 'touchend', onTouchEnd, false ); 我决定删除reveal.js触摸事件，并实施我自己的使用hammer.js和锤子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"); });
有趣的是，当我使用点击function时，小部件没有问题。
$('.reveal').on('click',function() { console.log("jquery click worked"); });
尽pipe触摸事件与问题之间有明显的联系，但我并没有否认这可能与CSS有关。 更新：特别是，我开始怀疑它可能有什么关系：hover和触摸事件。
质询
- 为什么发生这种情况？
- 我怎样才能听触摸事件，如touchstart，仍然使用iPhone / iPad的谷歌翻译小部件？
我的GOOGLE翻译小工具代码
<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>
问题在于，对于您select的布局，Google Translate小部件会在新的iframe中打开语言选项“dropdown”，并且（长话短说）hammer.js与iframe内容无法正常播放（推测可能是reveal.js有同样的问题）。
你可以尝试一些非常复杂的方法来解决涉及事件和iframe内容的问题，但是更简单的解决scheme是使用另一个不使用iframe的布局，例如用HORIZONTAL或VERTICALreplaceSIMPLE
function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false },'google_translate_element'); }
我已经更新了你最近的小提琴： http : //jsfiddle.net/LfkLy/10/