question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Delegated events do not bubble

See original GitHub issue

First off, thanks for writing this library! I’ve been using MobX in combination with React for quite some time and always felt like there must be a more reactive and finer grained approach to updating the DOM with an observer library like MobX. I’m really happy I found your libraries as it looks like they bring it all together in a very nice way. Congrats on your work and the new ideas!

I noticed that setting event handler props that result in delegated events do not bubble, which I assume is not by design. Here is an example:

function MyComponent() {
  function onClick(e) {
    console.log(e)    
  }

  return (
    <div onClick={onClick}>
      Parent
      <div onClick={onClick}>
        Child
      </div>
    </div>
  )
}

Clicking on the child div prints to the console only once even though stopPropagation is not called. Using the onclick instead of the onClick prop works as expected and clicking on the child div results in two log entries in the console. I would have expected the delegated events to bubble as long as stopPropagation is not called.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ryansolidcommented, Apr 28, 2019

Ok this should behave as expected now in the new version dom-expressions 0.7.10. Please confirm that it works for you.

0reactions
kiejocommented, Apr 29, 2019

Wow this was fast! I can confirm that it now works as expected for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML DOM: why do some of the events don't bubble up ...
While trying to understand the concept of Event Delegation, I came across a few events like focus, blur, load, unload, change, reset, ...
Read more >
What's the difference between event delegation/bubbling ...
tl;dr: event delegation is the technique, bubbling is what the event itself does, and capturing is a way of using event delgation on...
Read more >
Event delegation - The Modern JavaScript Tutorial
The delegation has its limitations of course: First, the event must be bubbling. Some events do not bubble. Also, low-level handlers should not...
Read more >
Event Bubbling and Event Catching in JavaScript and React
Long story short, event delegation is simply put a powerful JavaScript technique ... Which Events Do Not Bubble and How Are They Handled?...
Read more >
JavaScript: Event bubbling and delegation
Event bubbling is the propagation of an event from its origin towards the root element. In other words, if an event occurs on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found