Stopping events bubbling
Hi there,
I have a small ImageView that's been added to another, much larger ImageView. They both have 'click' event handlers. Is it possible to stop the clicks being handled by both handlers, the event seems to be bubbling up to the larger images handler even when it's the smaller one that's been clicked?
Thanks,
Toby
2 Answers
-
Ha, figured it out. In the first event handler I modify e.source in some arbitrary way and then look for this modification in the second. So something like this:
// First event handler function firstClick(e) { e.source.myClick = true; // Rest of handler here... } // Second event handler function secondClick(e) { if (!e.source.myClick) { // Rest of second handler here, only executes if firstClick hasn't... } }
-
Toby
I used to do something similar to you, where I would give every object its own name, ie myImage1.customName = 'nameOfimage1' and myImage2.customName = 'nameOfimage2', and then test for that name in my eventlisteners:
if(e.source.customName === 'nameOfimage2'){ // do something }
However, this is often not necessary, as the variable containing the proxy has the information you need:
var win = Ti.UI.createWindow({}); var image2 = Ti.UI.createImage({}); win.add(image2); win.open(); win.addEventListener('click', function(e){ if(e.source === image2){ // do something } });
Note that the principle works, but this code is just an example and hence has not been tested.