0

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

ramblinjan
  • 6,578
  • 3
  • 30
  • 38
Heikki Mustonen
  • 301
  • 3
  • 15

1 Answers1

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();
    }
});
76484
  • 8,498
  • 3
  • 19
  • 30
  • I got an AHA-moment. The order does matter. Event is an queue, where the browser crawls trough all events in the order which is given in the code. If both handlers are attached to same element if first does Click-handler and after that it goes trough the .popup click-handler. event.stopPropagation is ok, but I think that I need to deattach other handlers meanwhile I'm working with the popup. – Heikki Mustonen Sep 23 '14 at 11:14
  • The event "bubbles" up from the target to its parents. If .popup is clicked, the .popup click handler will run and (if the event is not stopped from propagating) the body click handler will run after. – 76484 Sep 24 '14 at 02:18