Prevent event bubbling
ssured opened this issue · 4 comments
All e.preventDefault() calls in the code should have a e.stopPropagation(); call added on the next line, to prevent event bubbling
Hey,
Could you explain to me what are the benefits of doing this?
As you probably know events bubble through the dom: once you mousedown on an element, all elements up in the dom hierarchy will by default get a mousedown event.
What preventDefault (http://api.jquery.com/event.preventDefault/) does is cancel the browser behaviour, so for example it cancels following a link.
stopPropagation stops the bubbling in the DOM, see http://api.jquery.com/event.stoppropagation/. What it essentially does is “Ok, I processed the event and I know for sure no one else needs to handle this event”
My use case is I use drawing board over a leaflet.js map. Both libraries act upon a mouse move; drawing board draws, leaflet.js scrolls. Without stopPropagation, the mousedown event first hits you library, which draws a line, then it hits leaflet and scrolls the map.
If you add stopPropagation to all event handlers you make sure you isolate the behaviour of drawing board to itself. No other libraries will act upon events generated inside your drawing board control.
Hope this explanation helps to understand the matter. BTW thanks for implementing and releasing this library, I love the easy setup!
On 28 Nov 2013, at 12:52, Emmanuel Pelletier notifications@github.com wrote:
Hey,
Could you explain to me what are the benefits of doing this?
—
Reply to this email directly or view it on GitHub.
Okay thanks, yeah it helps.
So if I get this right, the best is to use stopPropagation() and if people wanna deal with the events of the drawingboard they can listen to the 'board:startDrawing', 'board:drawing', 'board:stopDrawing', ... events.
Yeah, your API events are more than enough for others to hook into!
On 28 Nov 2013, at 13:09, Emmanuel Pelletier notifications@github.com wrote:
Okay thanks, yeah it helps.
So if I get this right, the best is to use stopPropagation() and if people wanna deal with the events of the drawingboard they can listen to the 'board:startDrawing', 'board:drawing', 'board:stopDrawing', ... events.
—
Reply to this email directly or view it on GitHub.