javascript 触摸屏用户必须单击链接两次才能工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24662897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Touch-screen users have to click link twice for it to work
提问by imp
I have this drop-down menu that drops down on hover normally, but on touch devices, I simply made it so that you can click to open it as well.
我有这个下拉菜单，它通常在悬停时下拉，但在触摸设备上，我只是制作了它，以便您也可以单击打开它。
The problem is that it seems like the <ul>that drops down isn't completely in focus or something because I have to click the links twice on my iPhone 4 to make them work.
问题是，<ul>下拉的似乎没有完全聚焦或其他原因，因为我必须在 iPhone 4 上单击两次链接才能使它们工作。
Here's the code I'm working with:
这是我正在使用的代码：
$(document).ready(function() {
$('.myMenu > li').bind('mouseover', openSubMenu);
$('.myMenu > li').bind('mouseout', closeSubMenu);
$('.myMenu > li').bind('click', toggleSubMenu);
/* Also tried, currently using:
$('.myMenu > li').bind('tap', toggleSubMenu);
*/
function openSubMenu() {
$(this).find('ul').addClass("hovered");
};
function closeSubMenu() {
$(this).find('ul').removeClass("hovered");
};
function toggleSubMenu() {
$(this).find('ul').toggleClass("hovered").focus();
};
});
The .focus()was the fix I tried adding. It didn't break the code but didn't fix it either. I know there are several things I can do to make it better for touch-devices, but for now, the click method is what I'm sticking with.
这.focus()是我尝试添加的修复程序。它没有破坏代码，但也没有修复它。我知道我可以做几件事情来使触摸设备变得更好，但就目前而言，我坚持使用单击方法。
By the way:
顺便一提：
.hovered{
opacity:1 !important;
visibility: visible !important;
}
The HTML setup is basically <ul>s inside <ul>s like you would expect from a drop-down menu. If you for some reason want the markup just say so and I'll add it.
HTML 设置基本上<ul>是在<ul>s 中，就像您从下拉菜单中所期望的那样。如果您出于某种原因想要标记，请直接说出来，我会添加它。
EDIT: Here's the link to the website I'm working on: http://bok-it.underbakke.net
编辑：这是我正在处理的网站的链接：http: //bok-it.underbakke.net
EDIT: Some additional information you might find useful that I noticed just now. The first time I click the link, the CSS on that link acts like it's hovered (as : hover) when I click on the sub-link the first time the main link (the one I first clicked to show the dropdown) loses the state of hover. This is why I think this is a focus issue.
编辑：我刚才注意到的一些您可能会觉得有用的附加信息。我第一次单击链接时，当我第一次单击子链接时，该链接上的 CSS 就像悬停（如：悬停），主链接（我第一次单击以显示下拉列表的那个）失去状态的悬停。这就是为什么我认为这是一个焦点问题。
EDIT: The HTML markup as requested:
编辑：请求的 HTML 标记：
<ul class="myMenu">
<li><a href="/"><span class="icon-home"></span> Framside</a></li>
<li><a href="#" id="nbutikk"><span class="icon-cart"></span> Butikk</a>
<ul>
<li><a href="/sand"><span class="icon-cart"></span> Sand</a></li>
<li><a href="/sauda"><span class="icon-cart"></span> Sauda</a></li>
<li><a href="http://kontorhandel.no"><span class="icon-cart"></span> Nettbutikk</a></li>
</ul>
</li>
<li><a href="#" id="nit-tjenester"><span class="icon-console"></span> IT Tjenester</a>
<ul>
<li><a href="/driftsavtale"><span class="icon-console"></span> Driftsavtale</a></li>
<li><a href="/asp_vps"><span class="icon-console"></span> ASP & VPS</a></li>
<li><a href="/overvaking"><span class="icon-console"></span> Overv?king</a></li>
<li><a href="/nettverk"><span class="icon-console"></span> Nettverk</a></li>
</ul>
</li>
<li><a href="#" id="nsupport"><span class="icon-info"></span> Support</a>
<ul>
<li><a href="/fjernsupport"><span class="icon-info"></span> Fjernsupport</a></li>
<li><a href="/utskrift_asp"><span class="icon-info"></span> Utskrift ASP</a></li>
<li><a href="/rdp_rycloud"><span class="icon-info"></span> RDP: Rycloud</a></li>
<li><a href="teamviewer_host"><span class="icon-info"></span> TeamViewer Host</a></li>
</ul>
</li>
<li><a href="/kontakt"><span class="icon-mail"></span> Kontakt Oss</a></li>
</ul>
--------------SOLUTION--------------
- - - - - - - 解决方案 - - - - - - -
EDIT: For people that are seeking the solution to this, here's the jQuery that fixed it for me (You should also give @jonsuh an upvote for wipping out the solution):
编辑：对于正在寻求解决方案的人，这是为我修复它的 jQuery（你也应该给 @jonsuh 一个赞许以消除解决方案）：
$(".myMenu li ul li a").on("touchend", function(event) {
window.location.href = $(this).attr("href");
});
回答by jonsuh
When you mouseover a link in the submenu, the state of the parent list item changes.
当您将鼠标悬停在子菜单中的链接上时，父列表项的状态会发生变化。
However in iOS, when you click on a link in the submenu, it detects that the parent list item state needs to change, so instead of executing a tap, it's changing the state of the item, which is why it's requiring a second tap. (I hope this makes sense).
但是在 iOS 中，当您单击子菜单中的链接时，它会检测到父列表项的状态需要更改，因此它不是执行点击，而是更改项目的状态，这就是为什么它需要第二次点击。（我希望这是有道理的）。
To cut to the chase, make sure there isn't a state change in the parent list item. Keep it the same when you hover over it as when you're hovering over the submenu links.
为了切入正题，请确保父列表项中没有状态更改。将鼠标悬停在它上面时与将鼠标悬停在子菜单链接上时保持相同。
I haven't tested these and it's tough when I'm not working with the code live, but possible solutions could be as follows:
我没有测试过这些，当我不使用实时代码时会很困难，但可能的解决方案如下：
You could do it with jQuery and detecting a touch end, which isn't the best solution, but it shouldwork:
您可以使用 jQuery 来完成并检测触摸端，这不是最好的解决方案，但它应该可以工作：
$(".myMenu ul li a").on("touchend", function(event) {
window.location.href = $(this).attr("href");
});
Another is to try to keep the state the same with CSS and it may keep Safari from detecting a change in state. (I removed my CSS answer since it didn't work)
另一种方法是尝试使用 CSS 保持状态相同，这可能会阻止 Safari 检测到状态变化。（我删除了我的 CSS 答案，因为它不起作用）
回答by DA.
Read this: http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
阅读：http: //sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
But if a clickable element also does something on mouseover then tapping on that element will trigger a mouseover event instead of a click. Tapping on the same element again will produce a click event.
但是，如果可点击元素也在鼠标悬停时执行某些操作，那么点击该元素将触发鼠标悬停事件而不是点击。再次点击同一个元素将产生一个点击事件。
If you have a mouseover event, iOS (maybe other OSes) will fire that upon initial click rather than the actual click event. I'd add some alerts to your JS to see which event, exactly, is being called on that initial tap.
如果您有鼠标悬停事件，iOS（可能是其他操作系统）将在初始单击而不是实际单击事件时触发该事件。我会向您的 JS 添加一些警报，以查看在初始点击时究竟调用了哪个事件。
回答by V31
Instead of having the click event of Jquery try the tap event like
而不是让 Jquery 的点击事件尝试像这样的点击事件
$('.myMenu > li').bind('tap', toggleSubMenu);
回答by Matt Rossetta
I forget where I found this solution but with jQuery I do something like this and it seems to do the trick:
我忘了我在哪里找到了这个解决方案，但是使用 jQuery 我做了这样的事情，它似乎可以解决问题：
$(document).ready(function() {
$('a,input').bind('touchend', function() {});
});
I used to use 'touchstart' but 'touchend' seems to be working better.
我曾经使用过“touchstart”，但“touchend”似乎效果更好。
