在流星中单击body / HTML元素时关闭打开的div

Question

所以我在一个流星项目工作，我试图得到一个下拉菜单关闭时，用户点击它的外部。我以前用过jquery和普通HTML，但这次我们用的是velocity.js和meteor.

那么在打开下拉div的链接上，我写上:

Template.layout.events({
'click #profile-btn': function () {
    if (userTog == false) {
        $('#user-menu').velocity("fadeIn", { duration: 150 });
        userTog = true;
    }
    else if (userTog == true) {
        $('#user-menu').velocity("fadeOut", { duration: 150 });
        userTog = false;
    }        
},
.....

，然后我使用流星包来处理主体上的事件，因为现在不支持。

Template.body.events({
'click html': function(e, data, tpl) {
    userTog = false;
    $('#user-menu').velocity("fadeOut", { duration: 150 });
    e.stopPropagation();
}});

然而，以上就是不工作。它基本上只是让菜单出现，然后立即消失。这是与速度。js，流星或我只是做错了吗?

任何建议将不胜感激!

Answer 1

我刚刚做了一个材料设计选择框，所以我能感受到你的痛苦:-)。我是这样解决的:

正常情况下，只能对焦input或anchor。我偶然发现的一个技巧是，在元素属性中使用tabindex="0"可以让它获得焦点，即使它是div。这是什么意思?如果你可以focus()一个元素，那就意味着你可以blur()它。因此，当您单击下拉按钮时，在事件处理程序(如$('.dropdown-menu').focus())的末尾添加一行。然后，为了避免这种情况，只需创建一个类似'blur .dropdown-menu': function() {*..hide..*}的事件处理程序。这样，你就不会有这些丑陋的全局事件观察者。

缺点是你得到一个发光的蓝色轮廓(出于可访问性的原因)。你可以通过在css中添加outline: 0;这样的行来消除这个问题。

PS，你的不工作的原因是因为'click #profile-btn'气泡到身体，所以它执行两个。要修复它，您需要通过e.stopPropagation();停止气泡。