为什么触摸事件监听器似乎阻止在iphone或ipad上选择google翻译语言？ [英] Why are touch event listeners seemingly preventing the selection of google translate languages on the iphone or ipad?

问题描述

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

I've a problem with the google translate widget. When using the iphone or the ipad I can't select the language to translate to. I can click the first button, but then when the languages menu appears and I tap a language, the menu immediately disappears and the click registers on the element that was behind the menu. This problem only occurs under very specific situations which I will outline below.

• 以下问题已在 iphone4 ios5.0.1
  和 ios 7.0.6。


• 问题在firefox 29.0.1，chrome
  31.0.1650.63 m或


• 在 http：// jsfiddle的问题的JSfiddle。 net / LfkLy / 1 /


• 不需要Reveal.js重新创建此问题。

• The problem described below has been observed on an iphone4 ios5.0.1 and ipad2 ios 7.0.6.
• The problem has NOT been observed on firefox 29.0.1, chrome 31.0.1650.63 m or internet explorer 11.
• JSfiddle of the problem at http://jsfiddle.net/LfkLy/1/
• Reveal.js is not needed to recreate this problem.

我第一次注意到这个问题，当我使用一个页面上的小部件与reveal.js经过很多玩，我发现，如果我设置触摸到false在reveal.js配置或注释掉下面的行，

I first noticed the problem when I used the widget on a page with reveal.js After a lot of playing around, I found that if I set touch to false in the reveal.js config or commented out lines below, the widget worked as it should have.

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

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

I decided to remove reveal.js touch events and implement my own using hammer.js and the hammer jquery plugin. I used something like this

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

上述代码实现后，问题再次出现。我修改了代码，并尝试它与只是hammer.js和得到相同的结果。问题发生，无论我附加了触摸侦听器的页面的哪一部分。为了好奇，我用jquery尝试它，并得到相同的结果。

Once the above code was implemented, the problem occurred again. I modified the code and tried it with just hammer.js and got the same result. The problem occurred regardless of which part of the page I attached the touch listener to. For curiosity's sake I tried it with jquery and again got the same result.

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

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

Interestingly enough, when I used the click function there was no problem with the widget.

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

尽管触摸事件和问题之间存在明显的联系，但我没有忽略不知何故与CSS有关。 更新：尤其是，我开始怀疑它可能与以下内容有关：悬停和触摸事件。

Despite the obvious link between touch events and the problem, I haven't dismissed the possibility that this may somehow be related to CSS. UPDATE: In particular, I'm starting to suspect it might have something to do with :hover and the touch events.

问题

1. 为什么会发生这种情况？


2. 如何侦听触摸事件（如touchstart），并仍然在iphone / ipad上使用google translate
   小部件？

我的GOOGLE TRANSLATE 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>       

推荐答案

问题是， ，Google翻译小部件会在新的iframe中打开语言选项下拉菜单，（长篇小说）hammer.js不能很好地与iframe内容播放（可能是reveal.js有相同的问题）。

The problem is that for the layout you've selected, the Google Translate widget opens the language options "dropdown" in a new iframe, and (long story short) hammer.js doesn't play nicely with iframe content (presumably reveal.js has the same issue).

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

You could try some pretty complicated means of working around the issue involving dealing with the events and the iframe content, but a much simpler solution is to use another layout that doesn't use the iframe, e.g. replace SIMPLE with HORIZONTAL or VERTICAL

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

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

这篇关于为什么触摸事件监听器似乎阻止在iphone或ipad上选择google翻译语言？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！