Event delegation handlers are called in incorrect order

[phillipskevin]

In the CanJS 3.x-5.x, delegated events do not work correctly.

If you have a view like:

<div>
  <p>Hello</p>
</div>

...and these event handlers:

    '{element} div click': function(el, ev) {
      ev.stopPropagation();
      console.log('parent clicked');
    },
    '{element} p click': function(el, ev) {
      ev.stopPropagation();
      console.log('child clicked');
    }

...clicking on the <p> will cause both event handlers to be called.

This is happening because in this code:

can-dom-events/helpers/-make-delegate-event-tree.js

Lines 22 to 41 in cbd3130

	canReflect.each(handlersBySelector, function(handlers, selector){
	var cur = ev.target;
	do {
	// document does not implement `.matches` but documentElement does
	var el = cur === document ? document.documentElement : cur;
	var matches = el.matches || el.msMatchesSelector;
	// Text and comment nodes may be included in mutation event targets
	// but will never match selectors (and do not implement matches)
	if (matches && matches.call(el, selector)) {
	handlers.forEach(function(handler){
	handler.call(el, ev);
	});
	}
	// since `el` points to `documentElement` when `cur` === document,
	// we need to continue using `cur` as the loop pointer, otherwhise
	// it will never end as documentElement.parentNode === document
	cur = cur.parentNode;
	} while (cur && cur !== ev.currentTarget);
	});

...the loop over handlersBySelector should be done inside of the do/while loop so that the inner-most event handler will always be hit first.

[phillipskevin]

stopPropagation is not stopping an event from hitting a separate delegated event listener. I need to call the actual stopPropagation. Going to reopen so I can fix this.