无法单击 onClick() 事件下拉列表中的锚标记答案

【问题标题】：Unable to click anchor tags inside onClick() event drop-down无法单击 onClick() 事件下拉列表中的锚标记
【发布时间】：2014-06-27 04:52:10
【问题描述】：

我有这个 HTML：

<ul>
    <li class="parent_menu">
        <ul class="child-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

    </li>
</ul>

以下 Jquery 在将鼠标悬停在父级上时显示下拉：

$('.parent_menu').on('touchstart click', function(e){
                e.stopPropagation(); 
                e.preventDefault();

                $(".child-menu", this).slideToggle(400); 

            }       
        );

这里发生的情况是，如果我单击父菜单，则会显示下拉菜单。但我无法单击下拉列表中子菜单项（如链接 1、链接 2 等）的锚标记。我认为这是由于上面使用的slideToggle() 或onClick()。如何修复它以使子菜单链接可点击？

【问题讨论】：

标签： javascript jquery onclick slidetoggle

【解决方案1】：

这些是有原因的吗？

e.stopPropagation(); 
e.preventDefault();

preventDefault() 会杀死你的锚。如果您不需要它们，请将它们删除。

http://jsfiddle.net/isherwood/Qv8hn

以下是您如何使用stopPropagation() 来防止您的链接切换菜单：

$('.parent_menu').on('touchstart click', function (e) {
    $(".child-menu", this).slideToggle(400);
}).find('a').on('touchstart click', function (e) {
    e.stopPropagation(); 
});

http://jsfiddle.net/isherwood/Qv8hn/1

【讨论】：

你是对的。当我删除e.preventDefault(); 时，锚点是可点击的。它在桌面上运行良好。但是没有e.preventDefault();。在 ipad 和触摸屏设备中，下拉菜单会向下切换并立即上升。我可以为触控设备做什么？
查看我最近的更新。此外，您甚至可能不需要touchstart。这些设备知道什么是点击，因此它可能会切换两次。
完美的艾舍伍德。你很准。在没有e.preventDefault(); 的情况下，是touchstart 导致了该问题。我删除了它，就像你说的它也可以在触摸屏上工作。锚现在也可以工作。太感谢了。我被困了几个小时。你帮了很多忙。干杯！
在你指出之后，我认为我什至不需要e.stopPropagation();。 ;)
仅当您关心菜单在离开页面时向上滑动时。只是有点奇怪。 :-)