Question

我在我正在处理的网站上有一个下拉菜单，它在激活时添加了不同的类。它内置于WordPress主题中，所以我不得不为iPad横向模式构建一个解决方法。在横向上，网站导航显示与桌面相同，因此我需要创建一些触摸事件来模仿行为。

我要做的第一件事就是在第一次点击时停用链接，然后再次点击它就重新激活它。这很好用。

if ('ontouchstart' in document.documentElement) {
    $('#masthead nav ul > li:has(.sub-menu) a').click(function(e){
        e.preventDefault();
        $('li.clicked_link').on('click', function(){
            var this_link = $(this).find('> a').attr('href');
            document.location.href=this_link;
        });

        $(this).parent().addClass('clicked_link');
    });
}

问题在于，当您点击li.sub-menu时，它会在其上添加一个sub-hover类，从而激活下拉菜单。这是一个CSS / jQuery下拉菜单，因此它基于sub-hover类的存在。我第一次点击时它工作正常，但我想在你点击它之外删除该类。如果我点击下拉菜单中的其他链接，我会停用它，但我想将点击事件绑定到html或body元素，因此如果您点击它之外的任何位置，它会删除{{ 1}}类，从而删除下拉列表。

我试着这样做：

sub-hover

它不起作用，因为它似乎触发了第一个单击功能，然后立即触发html单击功能。我也尝试使用if ('ontouchstart' in document.documentElement) { $('#masthead nav ul > li:has(.sub-menu) a').click(function(e){ e.preventDefault(); $('li.clicked_link').on('click', function(){ var this_link = $(this).find('> a').attr('href'); document.location.href=this_link; }); $(this).parent().addClass('clicked_link'); $('html').on('click',function(){ $('#masthead nav ul > li:has(.sub-menu)').removeClass('sub-hover').removeClass('clicked_link'); }); }); }，但同样的事情发生了。我也在初始点击功能之外尝试了它，但是，正如你猜测的那样，它会同时触发两个点击事件，但不起作用。

如何才能让它绑定但不会在发生初始点击事件后触发点击事件？

Answer 1

这不是问题的直接解决方法，但可以帮助您解决问题（评论太长）。

您在另一个点击处理程序中绑定点击处理程序而不解除之前的点击处理程序，因此每次单击匹配的<li>新点击处理程序时都会添加到<html>和其他匹配元素。我坚信你并没有故意这样做，也没有意识到这一点。
离开时，您尝试使用
绑定点击.clicked_link
```
$('li.clicked_link').on('click', function(){
```
此代码会查找DOM中当前存在的匹配元素，并且可能找不到匹配的元素，因为您实际上在其后面添加了类clicked_link。

您实际上需要delegate this handler来检查以后的匹配元素。
事件是 bubbled up 直到根元素，换句话说：如果你点击一个锚点，从锚点开始，所有父母直到html将收到一个点击事件，您可以阻止使用e.stopPropagation();。

理想情况下，您的代码应该是这样的：

if ('ontouchstart' in document.documentElement) {

   $('#masthead nav ul > li:has(.sub-menu) a').click(function(e){
       e.preventDefault();
       $(this).parent().addClass('clicked_link');
    });

    $(document).on('click','li.clicked_link', function(){
        var this_link = $(this).find('> a').attr('href');
        document.location.href=this_link;
    });

    $('html').on('click',function(){
        $('#masthead nav ul > li:has(.sub-menu)').removeClass('sub-hover').removeClass('clicked_link');
    });
}

（无法继续使用当前可用的信息。最小的代码，例如相应的html结构或演示会有所帮助）

菜单单击后，将Click事件附加到HTML

1 个答案: