点击外部时隐藏div并不适用于iPad

Question

我有以下代码：

$(document).on('click touch', function(e) {
    var nav    = $(e.target).closest('.nav-js-trigger');
    var hidden = $(e.target).closest('.show-nav')

    if ( nav.length > 0 ) {
        $('.show-nav').not( nav.next().toggleClass('show-nav') ).removeClass('show-nav');
    } else if ( hidden.length === 0 ) {
        $('.show-nav').removeClass('show-nav');
    }
});

如果用户点击菜单div，它会隐藏菜单div。为了测试这个：

1. 点击菜单链接。
2. 点击黄色div之外。

div应该被隐藏。

问题是这在iPad上不起作用。为什么呢？

这是FIDDLE。

我添加了click touch，并尝试了touchend和touchstart。

Answer 1

收到消息：

  

评论只能编辑5分钟

所以我将其作为答案发布。

• 我建议您在测试中使用touchend，touch事件不存在。也许你的测试因浏览器缓存而失败了？
• 您是否也尝试将听众放在document.documentElement，document.body和/或window上？

• 尝试使用vanilla JavaScript like suggested by Apple：

  document.documentElement.addEventListener("touchend", function(e){ alert('hello world'); }, false);
  

Fiddle with document.documentElement and touchend