iPad 上的下拉菜单不会消失答案

【问题标题】：Dropdown doesn't disappear on iPadiPad 上的下拉菜单不会消失
【发布时间】：2015-10-01 21:08:06
【问题描述】：

我有一个简单的下拉按钮，当用户单击或点击（在触摸屏上）按钮时，它会显示内容。它工作得很好，但在某些移动设备（尤其是 iPad 和装有 Windows Mobile 的设备）上，当用户触摸下拉菜单外的屏幕时，下拉菜单不会消失。

这是 HTML：

<div class="dropdown">
    <div class="dropdown-toggle">Click Me</div>
    <div class="dropdown-menu">Example contnt of the dropdown</div>
</div>

这里是 JavaScript：

$(document).on('mouseenter', '.dropdown', function() {

    $(this).children('.dropdown-menu').show();

}).on('mouseleave', '.dropdown', function() {

    $(this).children('.dropdown-menu').hide();

});

为什么它在这些设备上不起作用？
我还应该使用哪些其他事件？
最重要的是：如何使下拉菜单在所有设备上正确消失？跨浏览器和跨设备的解决方案会很棒。

【问题讨论】：

移动设备（android、ios）上没有mouse 事件（除了click，还有click 事件比touch 事件慢）。我建议跨平台使用hammer.js

标签： javascript jquery ipad touch mouseenter

【解决方案1】：

您可以将touchstart 事件添加到以下

$(document).on('mouseenter touchstart', '.dropdown', function() {

同样，鼠标移出时的touchend 事件

}).on('mouseleave touchend', '.dropdown', function() {

【讨论】：

是跨浏览器解决方案吗？
@zitix，是的，这应该与大多数浏览器兼容。