Question

我的目标是创建一个菜单：

1）当您单击文档正文时，会弹出菜单 2）当你再次点击身体时，它会隐藏。 3）当你点击X时，菜单会隐藏。

以下是为此导航的隐藏/显示提供动力的功能。当您在身体上多次点击时，似乎会出现事件冒泡。它将所有事情都绊倒，事件一直持续到阙空。

我在最好的修复方面有点迷失。

    this.navigationEvents = function () {

        // Cache This
        var that = this;

        // On Body Click, Show Nav
        document.body.addEventListener('click', function(){

            // Show Nav Toggle if Anywhere on body is clicked on
            that.navList.parentElement.classList.toggle('show');

            // Set timeout for 30 seconds, toggle menu off after ellapsed time.
            var timeOut = setTimeout(function(){
                // Remove Class: Show
                that.navList.parentElement.classList.remove('show');
            }, that.navViewTime)

        });

        // If 'Controls' is clicked on, stop event from bubbling to body
        this.navList.parentElement.addEventListener('click', function(e){
            // Stop Propagation
            e.stopPropagation();
        });

        // On Nav Item Click, Jump to associated slide index
        $(this.navList).find('li').on('click', function(e){
            // Go To Slide Index
            $(that.target).slick('slickGoTo', $(this).index())

            // Hide Menu
            $(document.body).click();

        });

        this.navClose.addEventListener('click', function() {
            $(document.body).click();
        })



    };

如果你点击导航元素，我有事件停止它的预测。然而，当我点击身体上的一吨时，它会进入这一系列事件，菜单会反复隐藏/显示，直到它完成。

我无法分辨出发生了什么，我认为这可能与我的timeOut有关，也会重置自己。但是，当我删除setTimeout时，此问题仍然存在。

我想说这是事件排队并自行解决直到它完成（因为js是单线程）但我不知道解决这个问题的适当或最佳做法是什么。

感谢您的阅读，我们非常感谢任何帮助。

事件在应该自动隐藏的菜单上排队

0 个答案: