Events on plain DOM elements triggered multiple times
- Dominant language
- JavaScript
- Stars
- 394
- Forks
- 62
- PR merge metrics
- No merged PRs in 30d
Description
### Base Example
```
FamousFramework.component('famous-tests:html-element-events', {
behaviors: {
'.container': {
'size': [200, 200],
'align': [0.5, 0.5],
'mount-point': [0.5, 0.5]
}
},
events: {
'.button': {
'click': function($event) {
console.log('$event: ', $event);
// Actual behavior: above gets logged three times
// Expected behavior: above gets logged once
}
}
},
states: {},
tree: `
Button 1
Button 2
Button 3
`
});
```
### Problem:
Since the content of nodes are passed to the engine as strings, we can't attach events on to the plain dom elements. A workaround implemented by the framework is to crawl up the tree and attach the event on to the parent node containing the content. This will work for most cases. It breaks in this case since we end up having 3 click events getting attached to the parent node ('.container' in the above example).
### Solution:
On the framework level, we can attach attributes to the underlying plain dom elements in our detached dom. We would still attach the event to the parent node, but when we get the event, we would read the current target and invoke its listeners. However, the event object we get back from the Famous Engine is stripped and we cannot read the currentTarget. Ultimately, this will require an update to the Famous Engine.
### Temporary Workaround
In the meantime, wrap each html element in a node like so:
```
Button 1
Button 2
Button 3
```
And attach events as normal.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.