a/20116665/1636522

by wared

HTML

<div class="notify-me"><span>notify-me</span></div>
<div class="write-preview"><span>write-preview</span></div>

CSS

div {
    float: left;
    margin: 20px;
    padding: 10px;
    background: lightblue;
}

span {
    background: yellow;
}

JavaScript

/*$(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');
});