javascript - 使用带超时的模糊来实现点击外部关闭时 - 时间间隔有时太短

Question

我有一个小部件，其中有一个链接列表，可以打开和关闭:

<div class="widget">
    <input class="focuser">
    <a href="javascript:;">View options</a>
    <ul>
        <li>Option 1</li>
        <li>Option 1</li>
    </ul>
</div>

因此，当我单击查看选项时 - 会出现列表，当单击任何选项时 - 执行操作并关闭选项列表。

我需要具有click-outside-close功能 - 当用户单击外部的任何位置时只需关闭列表。

我通过在显示选项时聚焦不可见的输入以及输入的模糊来实现这一点 - 超时后隐藏选项。这样:

1. 当用户点击外部时 - 模糊超时超时 - 隐藏选项。
2. 如果用户单击任何选项 - 清除超时、隐藏选项并执行 东西。

而现在的问题是，有时超时会在点击之前结束。我将超时间隔增加到 200 毫秒，但仍然不是 100% 确定，而且 - 这样用户会在选项列表关闭之前看到延迟。

知道如何解决和/或改进这个问题吗？

编辑:

这是 JavaScript 代码的简化版本:

CartSidebar.DwCustomSelect = Ember.View.extend({

    blurTimeout: false,

    focusOut: function(e) {
        if (e.target.className == 'focuser') {
            var self = this;
            this.blurTimeout = setTimeout(function() {
                clearTimeout(self.blurTimeout);
                $(self.element).removeClass('opened'); // hide options .. 
            }, 180);
        }
    },

    click: function(e) {

        var clickedElement = e.target;

        clearTimeout(this.blurTimeout);
        if (clickedElement.tagName.toLowerCase() == 'li') {
            $(this.element).removeClass('opened'); // hide options .. 
            doStuff();
        }
    }
}

编辑2:

我创建了一个 plunker，因此您可以看到它的实际效果:

https://plnkr.co/edit/boA6yC0sEbLAZU9tjyso?p=preview

(我将超时设置得太小，所以您会看到问题。但即使您增加间隔 - 您也会看到 focusOut 在 click 之前触发.)

Answer 1

如果您想要一个功能，当用户单击除该 div 之外的任何位置时需要隐藏您的 div，那么您可以使用隐藏 div 的代码向整个文档添加一个单击监听器。

var a = document.querySelector("a");
var ul = document.querySelector("ul");
a.addEventListener('click', function(e){
e.stopPropagation();
if(ul.classList.contains('show')){
    ul.classList.remove('show');
    ul.classList.add('hide');
}else{
    ul.classList.remove('hide');
    ul.classList.add('show');
}   
});

document.addEventListener('click', function(){
    ul.classList.remove('show');
    ul.classList.add('hide');
});

有关详细示例，请检查下面的 jsbin

http://jsbin.com/mamexev/edit?html,css,js,output