Famous / Famous/framework

Events on plain DOM elements triggered multiple times

Open
#18 0 comments 0 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.