Finding the deepest nested components in DOM tree - reactjs

Question

I am trying to implement a keybinding mixin which let me write something like
createClass({
...
keybindings: function() {
return {
'escape' : function(event) { this._handleEscapeKey(); },
'enter' : function(event) { this._handleEnterKey(); },
'up' : function(event) { this._handleUpKey(); },
'down' : function(event) { this._handleDownKey(); },
'left' : function(event) { this._handleLeftKey(); },
'right' : function(event) { this._handleRightKey(); },
};
},
In my component. However I have problems when multiple components include the mixin. I need a way make the event listeners on the most deeply nested components in the DOM tree get precedence over its ancestors.
This is what I got so far, any ideas/suggestions/feedback is much appreciated
mixin:
KeybindingsMixin = {
modifiers: {
shift: 16,
ctrl: 17,
alt: 18,
meta: 91
},
keyCodes: {
escape : 27,
up : 38,
down : 40,
left : 37,
right : 39,
enter : 13,
shift : 16,
ctrl : 17,
alt : 18,
meta : 91,
s : 83,
},
singleModifier: {
shift: {
keyCode : 16,
shift : true,
ctrl : false,
alt : false,
meta : false
}
},
componentDidMount: function() {
if (this.__keybindings !== undefined) {
var keybindings = this.getAllKeybindings();
this.__keybindings = _.merge(this.__keybindings, keybindings);
$(window).on('keydown', this.__matchEvent);
}
},
componentWillUnmount: function() {
if (this.__keybindings !== undefined) {
var keybindings = _.keys(this.getAllKeybindings());
this.__keybindings = _.omit(this.__keybindings, keybindings);
$(window).off('keydown', this.__matchEvent);
}
},
childContextTypes: {
__keybindings: React.PropTypes.object
},
contextTypes: {
__keybindings: React.PropTypes.object
},
getAllKeybindings: function() {
return this.__getKeybindings();
},
getChildContext: function() {
return {
__keybindings: this.__getKeybindings()
};
},
__getKeybindings: function() {
var keybindings = Object.getPrototypeOf(this).keybindings();
this.__keybindings = this.__keybindings || (this.context && this.context.__keybindings) || keybindings || {};
return this.__keybindings;
},
__parseKeybindingString: function(binding) {
var tokens = binding.split(' ');
var modifiers = _.keys(this.modifiers);
var bindings = _.keys(this.keyCodes);
var parsedEvent = {
keyCode: 0,
alt: false,
ctrl: false,
shift: false,
meta: false
};
_.each(tokens, function(token) {
if (_.includes(modifiers, token)) {
parsedEvent[token] = true;
} else if (_.includes(bindings, token)) {
parsedEvent.keyCode = this.keyCodes[token];
}
}, this);
return parsedEvent;
},
__keybindingSpecified: function(event) {
},
__matchEvent: function(event) {
var eventMatcher = {
keyCode: event.keyCode,
alt: event.altKey,
ctrl: event.ctrlKey,
shift: event.shiftKey,
meta: event.metaKey,
};
var keybindings = this.__keybindings;
_.forOwn(keybindings, function(action, binding) {
var parsedEvent = this.__parseKeybindingString(binding);
if (_.isEqual(eventMatcher, parsedEvent)) {
event.preventDefault();
return action.call(this, event);
}
}, this);
return;
},
};

Answer 1

If by "deeply nested components in the DOM tree get precedence over its ancestors" you mean that the event should only trigger on the most deeply nested component and not bubble up to the components further up, you should call event.stopPropagation(). This cancels the bubbling, and the components further up won't get the event.
EDIT
Ah, sorry, I thought you used Reacts event system which allows stopPropagation even if they only attach one event handler to the root element. What you can do is something similar to what React does, in that for each element that uses the the mixin, you attach some property to that DOM node to say that it's listening to the event. Then when the event comes in, you check event.target and see if it has that property. If it doesn't, you check event.target.parentElement and recursive upwards until you find it. And as soon as you find that element, you stop going upwards to simulate the effect of stopPropagation.