canjs :not-selector in event triggers

Question

I've been stuck with the following situation.

1st I add click-event handler to the all elements of the page, which invokes a small popup. I'm not able to isolate the popup from this *-selector, thus it opens the popup in to popup and so on.

I've tried the following:

var controller = can.Control.extend({
    '*:not(.popup *) click': function(el, event) { //This does not work
        $(el).openPopUp() 
        //pseudo code, opens the popup in to <div class"popup"><input /><input /></div>
    },
});
var c = new controller('body');

Are there any hints for isolating this issue. The click handler is really needed for every other elements beside the elements inside of the popup, Yours Heikki

Answer 1

I think that what you would need to do is to attach one click event handler to the body and one click event handler to the .popup. The body click handler will open the popup. The .popup click handler will capture the event so that it does not get propagated to the body element.

var controller = can.Control.extend({
    'click': function ($el, event) {
        /* open popup now */
    },
    '.popup click': function ($el, event) {
        event.stopPropagation();
    }
});