search

ractivejs / ractive

Next-generation DOM manipulation
http://ractive.js.org
MIT License
5.94k stars 396 forks source link

stopPropagation() from DOM element generated in #each loop fails #3291

Closed mattwedge closed 5 years ago

mattwedge commented 5 years ago

Description: When {{#each arr}} is used to generate a list of DOM elements which fire on-click events, stopPropagation() fails. Strangely this only happens when the loop is wrapped inside another element...

Versions affected: tested on 0.9.3 and 1.2.0-edge

Platforms affected: tested on Chrome and Firefox

Reproduction: https://ractive.js.org/playground/index.html?env=docs&hidemenu#N4IgFiBcoE5SBTAJgcwSAvgGhAF3gDxICWAbgATFIC8AOngIYxq70B8BA9CaW7QHYCCAZwDGMYgAdclGvVwIAtpIA2DBfXK4AnpIR08CAB65OMBqNxkE7AbVxEyffuVfBgAYgQWw5JjAwMAVcQxwoAe34AWlEVYlEAawMwBBUVcNsXENCAIwBXXFxI8kiYuMSDAHdwmBUkdnIAIQKily58wsjnbPIuHm63YE5vUTBAuwduJyFOMQlpNhAcYXhSJnJzS2tyanJ+BEryACULK1IEAApgYK0mFkhyAHIPXDuEXEesG4VlNQUH54-VTqBCfG5IdQMB7Acg3ez+B4AbQAjABdG7YG6RaFw1jgVLpegPABmeX4W0iFwAlORroJWDJyKJIsJwioEAA6dIoC70FJpDIgKkAbgm9kxWVc9GqtXqUHIpPJVkpCBpdJ65E5NWIKGI-AYKg5wiKkgACjBwpIGCh1MRKSKbtlmfxWeyueEedKanV6A7JeQgvTAxg-ZggA

But here it works as expected:

https://ractive.js.org/playground/index.html?env=docs&hidemenu#N4IgFiBcoE5SBTAJgcwSAvgGhAF3gDxICWAbgATFIC8AOngIYxq70B8BA9CaW7QHYCCAZwDGMYgAdclGvVwIAtpIA2DBfXK4AnpIR08CAB65OMBqNxkE7AeXvBgAYgQWw5JjAwY79+0TJyAHt+AFpRFWJRAGsDMAQVFSDbfj80ggAjAFdcXBDgsIio2PoAdyCYFSR2cgAhHLzUrmzckL5U9O4ydr9HTldRMG8hTjEJaTYQHGF4UiZyc0trcmpyfgRS8gAlCytSBAAKYF9cJhZIcgByJ1PmBFxLrBOlVXUEC+uFZTUFR98kdQMC7Aci+Wi3GAXADaAEYALq+bC+ELAsGscAJJL0C4AMyy-CWIQOAEpyMdBKwZORRCFhEEVAgAHRJFAHejxRLJEDEgDcAnB4KRHXsZQqVWx5DxBKsRIQpPJaXsTIqxBQxH4DBUjOEeUkAAUYEFJAwUOpiETeb40jT+HSGcygqzRZVqty+cLyD4KV6MJb+JggA

evs-chris commented 5 years ago

This is an artifact of event delegation. It usually doesn't interfere with anything, but if you need direct control over events, you can disable delegation with delegate: false as an init option. You can also leave delegation enabled and tell ractive to stop preparation for you by returning false from the event handler.

mattwedge commented 5 years ago

Ah yeah that works nicely, thanks for the fast response!