Merge pull request #63 from canjs/event-delegation-handlers

Fixing event delegation

Author: phillipskevin

can-dom-events-test.js

@@ -188,3 +188,60 @@ require('./helpers/add-event-compat-test');
 require('./helpers/add-event-jquery-test');
 require('./helpers/add-jquery-events-test');
 require('./helpers/util-test');
+
+unit.test('domEvents.addDelegateListener call inner-most handler first (#62)', function (assert) {
+	var done = assert.async();
+	var grandparent = document.createElement('div');
+	var parent = document.createElement('p');
+	var child = document.createElement('input');
+
+	grandparent.appendChild(parent);
+	parent.appendChild(child);
+
+	var handlerCallCount = 0;
+
+	var paragraphClickHandler = function paragraphClickHandler() {
+		domEvents.removeDelegateListener(grandparent, 'click', 'p', paragraphClickHandler);
+		assert.equal(++handlerCallCount, 2, 'outer handler called second');
+	};
+
+	var inputClickHandler = function inputClickHandler() {
+		domEvents.removeDelegateListener(grandparent, 'click', 'input', inputClickHandler);
+		assert.equal(++handlerCallCount, 1, 'inner handler called first');
+	};
+
+	domEvents.addDelegateListener(grandparent, 'click', 'p', paragraphClickHandler);
+	domEvents.addDelegateListener(grandparent, 'click', 'input', inputClickHandler);
+
+	domEvents.dispatch(child, 'click');
+	done();
+});
+
+['stopPropagation', 'stopImmediatePropagation'].forEach(function(stopMethod) {
+	unit.test('domEvents.addDelegateListener should have a working ev.' + stopMethod + ' (#62)', function (assert) {
+		var done = assert.async();
+		var grandparent = document.createElement('div');
+		var parent = document.createElement('p');
+		var child = document.createElement('input');
+
+		grandparent.appendChild(parent);
+		parent.appendChild(child);
+
+		var paragraphClickHandler = function paragraphClickHandler() {
+			domEvents.removeDelegateListener(grandparent, 'click', 'p', paragraphClickHandler);
+			assert.ok(false, 'ev.stopPropagation works');
+		};
+
+		var inputClickHandler = function inputClickHandler(event) {
+			event[stopMethod]();
+			domEvents.removeDelegateListener(grandparent, 'click', 'input', inputClickHandler);
+			assert.ok(true, 'inner-most click handler called first');
+		};
+
+		domEvents.addDelegateListener(grandparent, 'click', 'p', paragraphClickHandler);
+		domEvents.addDelegateListener(grandparent, 'click', 'input', inputClickHandler);
+
+		domEvents.dispatch(child, 'click');
+		done();
+	});
+});

helpers/-make-delegate-event-tree.js

@@ -19,26 +19,30 @@ function makeDelegator (domEvents) {
 	canReflect.assignSymbols( Delegator.prototype, {
 		"can.setKeyValue": function(eventType, handlersBySelector){
 			var handler = this.delegated[eventType] = function(ev){
-				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;
+				var cur = ev.target;
+				var propagate = true;
+				ev.stopPropagation = ev.stopImmediatePropagation = function() {
+					propagate = false;
+				};
+				do {
+					// document does not implement `.matches` but documentElement does
+					var el = cur === document ? document.documentElement : cur;
+					var matches = el.matches || el.msMatchesSelector;
 
+					canReflect.each(handlersBySelector, function(handlers, selector){
 						// 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);
-				});
+					});
+					// 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) && propagate);
 			};
 			this.events[eventType] = handlersBySelector;
 			domEvents.addEventListener(this.element, eventType, handler, useCapture(eventType));