Как реализовать .not () в jQuery?

Question

У меня есть такой код:

document.onmousedown = function(){
    alert('test');
}

Теперь, кроме элемента с идентификатором "box", нажатие должно вызывать эту функцию, то есть эквивалент селектора jQuery .not().

Код jQuery будет:

$(document).not('#box').mousedown(function(){
     alert('test');
});

Как мне добиться того же, не используя jQuery?

Редактировать: Я не хочу код jQuery, но мне нужно действие, подобное селектору .not() jQuery в Javascript.

Редактировать: Я делаю подобный addthis виджет. Это файл размером 10 КБ, который будет отображать всплывающее окно при выделении текста. Он не будет использовать jQuery.

В моем случае при выделении текста отображается всплывающее окно. Если щелкнуть документ где-нибудь, кроме виджета, виджет должен исчезнуть.

Answer 1

Чтобы сделать это правильно, вам нужно проверить, есть ли у e.target || e.srcElement или у любого из его родителей id === 'box'.

Например: (с jQuery)

$(document).mousedown(function(e) {
    if ($(e.target).closest('#box').length)
        return;

    //Do things
});

без jQuery:

function isBox(elem) {
    return elem != null && (elem.id === 'box' || isBox(elem.parentNode));
}
document.onmousedown = function(e) {
    e = e || window.event;
    if (isBox(e.target || e.srcElement))
        return;
    //Do things
};

Кроме того, вы можете обработать событие mousedown для элемента box и отменить всплывание.

Answer 2

Самый чистый способ, который я могу придумать для того, что вы пытаетесь сделать, это установить событие document.onmousedown и затем остановить распространение события на событии box.onmousedown. Это позволяет избежать создания большого количества onmousedown событий по всему документу и избежать необходимости проходить через всю родительскую иерархию узла при каждом запуске события.

document.onmousedown = function() {
    alert("Foo!");
};
document.getElementById("box").onmousedown = function(e) {
    alert("Bar!");
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;          
    }
};

Answer 3

Вот один способ, который должен работать:

document.onmousedown = function(e){
   var event = e || window.event;
   var element = event.target || event.srcElement;
   if (target.id !== "box") { alert("hi"); } 
}

или, если вы хотите, чтобы его можно было повторно использовать с разными идентификаторами:

function myNot(id, callback) {
    return function (e) {
       var event = e || window.event;
       var element = event.target || event.srcElement;
       if (target.id !== id) { callback(); } 
    }
}

и использовать его:

document.onmousedown = myNot("box", function () {
    alert("hi");
});