点击页面上的任意位置隐藏两个元素

Question

我正在尝试使用类notify-me和write-review隐藏两个元素，点击页面上的任何位置，但不要点击这两个元素。

如何使用原型做到这一点？

现在，如果我点击叠加层，它们就会被关闭。

PS：我将点击事件附加到body。

Answer 1

试试这个：

$(document).on('click', function (e) {
    var re = /(^|\s)(notify-me|write-preview)(\s|$)/;
    if (re.test($(e.target).classNames())) return false;
    $$('.notify-me', '.write-preview').invoke('hide');
});

这是一个改进版本，它通过目标元素的祖先起泡：

$(document).on('click', function (e) {
    var re, els, iterator;
    re = /(^|\s)(notify-me|write-preview)(\s|$)/;
    els = [$(e.target)].concat($(e.target).ancestors());
    iterator = function (el) { return re.test(el.classNames()); };
    if (els.find(iterator)) return false;
    $$('.notify-me', '.write-preview').invoke('hide');
});

以下是演示：http://jsfiddle.net/wared/U7E2a/。