JavaScript, stop additional event listeners
Still looking for a better solution, but this may be the only way to do it:
var myFunc1 = function(event) {
alert(1);
if (something) {
event.cancel = true;
}
}
var myFunc2 = function(event) {
if (event.cancel) {
return;
}
alert(2);
}
document.body.addEventListener('click', myFunc1, false);
document.body.addEventListener('click', myFunc2, false);
Thoughts/comments welcome.
The DOM Level 3 method event.stopImmediatePropagation
is exactly what I need here. Unfortunately, it's not currently implemented in any browser (that I know of).
There's a further problem: the order that event listeners are executed is undefined. You'll need to handle event dispatch on your own to get around this, which leads us to some variant of llimllib's suggestion.
function dispatchSleightEvent(evt) {
var listeners = evt.currentTarget.sleightListeners[evt.type];
// can't use for-in because enumeration order is implementation dependent
for (var i=0; i<listeners.length; ++i) {
if (listeners[i]) {
if (! listeners[i].call(evt.currentTarget, evt)) {
return false;
}
}
}
return true;
}
function mixinSleightTarget(obj) {
if (! obj.sleightListeners) {
obj.sleightListeners = {}
obj.addSleightListener = function(type, listener) {
if (!this.sleightListeners[type]) {
this.sleightListeners[type] = [];
this.addEventListener(type, dispatchSleightEvent);
}
if (!this.sleightListeners[type+listener] {
this.sleightListeners[type+listener] = this.sleightListeners[type].length;
this.sleightListeners[type].push(listener);
}
}
obj.removeSleightListener = function(type, listener) {
if (this.sleightListeners[type+listener] {
delete this.sleightListeners[type][this.sleightListeners[type+listener]];
delete this.sleightListeners[type+listener];
}
}
}
}
This code is completely untested. To stop event dispatch while on a single target, an event listener returns false
. If you want more data hiding, you can rewrite the above from a functional programming standpoint, though this might introduce memory leaks.
I'll start with the simplest answer that satisfies the constraints you've given so far. If it doesn't meet some condition you haven't yet specified, let me know and I'll update it.
Only allow one click handler, and call functions based on conditions there. Your test code becomes:
var myFunc1 = function(event) {
alert(1);
}
var myFunc2 = function(event) {
alert(2);
}
var clickHandler = function(event) {
if (f1active) myFunc1(event);
if (f2active) myFunc2(event);
}
element.addEventListener('click', clickHandler);
var f1active = true;
var f2active = true;
and you can of course put any conditions you want to in clickHandler.