0

我有一个运行 jquery（不是 jquery mobile）的单页滚动站点我有一个触发下拉菜单（无序列表）显示的锚链接。单击下拉菜单中的列表项会以动画方式显示关联的幻灯片，并隐藏下拉菜单。

适用于除 iOS 浏览器之外的所有设备。我的问题是该链接仅在第一次单击时才有效。

我已广泛阅读有关区分 iOS 上的鼠标单击和悬停事件的内容。没有一个解决方案对我有用。

我已经尝试了一切：

  • 使 #btn_menu 元素成为锚点和 div
  • 在链接、li 标签、包装的 div 标签上添加 cursor:pointer 样式
  • 在所有列表菜单项上包装锚标记
  • 触发触摸事件，并在第一次点击后尝试触发 touchend、菜单点击事件等
  • 触摸库，例如 Hammer.js

简单的代码，例如。

$("#btn_menu").on("click touchstart", function(e) {
    e.preventDefault();
    if ($(".nav_menu").css('display') == 'block') {
        $(".nav_menu").css('display','none');
    } else {
        $(".nav_menu").css('display','block');
    }
});

$(".nav_menu ul li").on("click touchstart", function(e) { 
    e.preventDefault();
    $(".nav_menu").css('display','none');
    gotoSlide($(this).attr('data-slide'));

    //Tried all this:   
    //$('body').trigger("click touchstart");
    //$('#btn_menu').trigger("touchstart touchend touchmove");
    //$('#btn_menu').data('clicked', null);
    //$('#btn_menu').trigger("mouseout");
});

HTML 菜单：

<a id="btn_menu" href="#" data-role="button">
<span class="menutxt">MENU</span>
</a>
<div class="nav_menu" style="display:none;">
<ul>
    <li data-slide="1">Home</li>
    <li data-slide="2">slide 1</li>
    <li data-slide="3">slide 2</li>
    <li data-slide="4">slide 3</li>
</ul>
</div>

** 我所知道的正在发生 **

只有第一个 #btn_menu 和随后的 .nav_menu li 单击才能完美运行。但是，如果我随后轻轻触摸/移动屏幕，则进行中的 #btn_menu 单击会起作用。#btn_menu 上的事件监听器似乎被清除了？

悬停事件似乎在第一次点击后继续工作，并干扰所有正在进行的点击。我知道这一点，因为当我单击“菜单”这个词时，它会带有下划线 - 我似乎无法清除监听 #btn_menu 悬停的事件

在我的智慧结束。有没有人对我如何在单页网站上为这种下拉菜单获取在 iOS 上运行的点击事件有任何建议？

我在我的代码中测试了像 slicknav.js 这样的解决方案，但这些也表现出同样的问题。

4

1 回答 1

0

除了“touchstart”之外，您的代码中没有任何异常之处。在 Mozilla Developer Network 上查找它（总是一个很好的起点），它说（在“处理点击”下）：

由于在 touchstart 或一系列的第一个 touchmove 事件上调用 preventDefault() 会阻止相应的鼠标事件触发，因此通常在 touchmove 而不是 touchstart 上调用 preventDefault()。这样，鼠标事件仍然可以触发，并且链接之类的东西将继续工作。

如果您在第二个函数中删除“e.preventDefault()”会发生什么？

于 2013-12-13T11:27:41.053 回答