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

Question

所以我正在做一个流星项目，我试图让一个下拉菜单在用户点击它的外部时关闭。我在使用 jquery 和普通 html 之前已经这样做了，但这次我们使用 velocity.js 和 meteor.

所以在打开下拉菜单 div 的 link 上，我有这个：

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;
    }        
},
.....

然后我使用流星包来处理 body 上的事件，因为现在不支持它..

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

但是上面的方法不起作用..它基本上只是让菜单出现然后立即消失。这与 velocity.js、流星有关还是我只是做错了？！？

如有任何建议，我们将不胜感激！

Answer 1

我只需要制作一个 material 设计 select 盒子，所以我能感受到你的痛苦:-)。以下是我的解决方法：

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

缺点是您会得到一个发光的蓝色轮廓（出于可访问性原因）。你可以通过在你的 css 中加入像 outline: 0; 这样的行来摆脱它。

PS，你的不工作的原因是因为 'click #profile-btn' 冒泡到 body，所以它同时执行。要修复它，您需要通过 e.stopPropagation(); 停止该 bubblin。

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

closing an open div when body / html element is clicked in meteor

meteor

velocity.js