Javascript 在菜单单击后将单击事件附加到HTML

我在一个网站上有一个下拉菜单，当它被激活时，会添加不同的类。它内置于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菜单时，它会在其上添加一类
sub hover
，从而激活下拉菜单。它是一个CSS/jQuery下拉菜单，因此它基于
子悬停的存在。当我第一次单击它时，它可以正常工作，但是当你在它之外单击时，我想删除该类。如果我单击下拉列表中的另一个链接，它将停用它，但我希望将单击事件绑定到
html
或
body
元素，因此如果单击它之外的任何位置，它将删除
子悬停
类，从而删除下拉列表

我试着这样做：

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');
        });
    });
}

但它不起作用，因为它似乎启动了第一个单击函数，然后立即启动了html单击函数。我也试图使用
bind
，但同样的事情发生了。我也在初始点击功能之外尝试了它，但是，正如您所猜测的，它同时触发了两个点击事件，但不起作用

如何让它绑定而不是仅在初始单击事件发生后触发单击事件？
这不是问题的直接解决方法，而是可能有助于解决问题的方法（注释太长）


您正在将单击处理程序绑定到另一个单击处理程序中，而不解除以前的单击处理程序的绑定，因此每次单击匹配的
时，都会将新的单击处理程序添加到
和其他匹配元素中。我坚信你不是故意的，也没有意识到这一点

离开这里，您正试图绑定一个点击
。点击链接

$('li.clicked_link').on('click', function(){

此代码查找当前存在于
DOM
中的匹配元素，可能找不到匹配元素，因为您实际上是在类
之后添加该类的链接

实际上，将来需要检查匹配的元素

事件一直到根元素，换句话说：如果您单击一个锚，从锚开始，所有父级直到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结构或演示会有所帮助）
请提供相关的html/css。一把小提琴就好了！这完全有道理。等我有了iPad后，我会测试一下。我会告诉你我发现了什么！谢谢。好吧，这还不能用。看起来，当我单击链接时，它会添加类，然后立即运行
$（document）.on（）
函数。我需要在第一次单击后将函数绑定到链接，以便在第二次单击时会发生一些事情。您单击的链接位于要添加类的
中。。？