Question

I have code like:

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

Now, except the element with ID “box”, clicking should call this function, i.e. the equivalent of jQuery’s .not() selector.

The jQuery code would be:

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

How can I achieve the same thing without using jQuery?

Edit: I don’t want jQuery code, but i want an action similar to the .not() selector of jQuery in Javascript.

Edit: I am making an addthis-like widget. It is a 10kb file which will show a popup when a text is selected. It will not use jQuery.

In my case, when a text is selected, a popup is shown. When the document is clicked somewhere other than the widget, the widget should disappear.

Answer 1

To do this properly, you need to check whether e.target || e.srcElement or any of its parents has id === 'box'.

For example: (with jQuery)

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

    //Do things
});

Without 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
};

Alternatively, you could handle the mousedown event for the box element and cancel bubbling.