为什么touch事件监听器似乎阻止了iphone或ipad上谷歌翻译语言的选择?

Why are touch event listeners seemingly preventing the selection of google translate languages on the iphone or ipad?

本文关键字:谷歌 ipad 翻译 语言 选择 iphone 监听器 事件 touch 为什么      更新时间:2023-09-26

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

  • 下面描述的问题已经在iphone4 ios5.0.1上观察到ipad2 ios 7.0.6.
  • 这个问题已经NOT在firefox 29.0.1, chrome中被观察到31.0.1650.63 m或internet explorer 11.
  • 在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有关的可能性。UPDATE:特别是,我开始怀疑它可能与悬停和触摸事件有关。

    为什么会发生这种情况?
  1. 我如何收听触摸事件,如touchstart,仍然使用谷歌翻译iphone/ipad上的小工具?

我的GOOGLE TRANSLATE插件代码

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

问题是,对于你所选择的布局,谷歌翻译小部件打开语言选项"下拉"在一个新的iframe,和(长话短说)锤子.js不能很好地发挥iframe内容(大概揭示.js有同样的问题)。

你可以尝试一些相当复杂的方法来解决涉及处理事件和iframe内容的问题,但一个更简单的解决方案是使用另一个不使用iframe的布局,例如用HORIZONTALVERTICAL代替SIMPLE

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

我已经更新了你最近的小提琴在这里:http://jsfiddle.net/LfkLy/10/