javascript - 通知 div - 下拉关闭

Question

我有一个类似于 stackoverflow 的通知下拉列表。因此，当用户请求通知窗口时，我使用 .show 和 .hide 打开和关闭下拉 div。

同时，我还想在用户单击下拉 div 之外的任何位置时关闭它。

我的方法是在我的 layout.cshtml 上执行以下操作:

$(document).on("click", onDocumentClick);

function onDocumentClick(event) {
    var target = $(event.target);
    if (!target.hasClass('nbr-notifications')) {
        if ($('#notifications-dropdown').css('display') === 'block') {
            $('#notifications-dropdown').hide();
        }
    }
}

我的问题和担忧是:这是最好的方法吗？从性能 Angular ？因为我每次都处理文档上的所有点击。

Answer 1

如果您不确定该元素在哪里，就不能使用它吗？

    $('body').on("click",".nbr-notifications", onClick)
  .on('blur','.nbr-notifications',closeNotifications);

function onClick(event) {        

        if ($('#notifications-dropdown').css('display') === 'block') {
            $('#notifications-dropdown').hide();

    }
}

function closeNotifications()
{
//close it
}

此处仅响应对“nbr-notifications”类元素的点击，而不是为所有点击 Hook 事件处理程序并检查目标是否是所需的目标。