Hi, I am using a listview with a custom template binding some event listener to the inner elements. I have both singletap event listener on the inner element of the listview as well as the outmost container(in my case, a window) and I want use the event bubbled to the window to perform some action. However, the window cannot receive the bubble event from the inner element(But when I remove the eventlistener on the inner element, it can!) I really appreciate any thought that may causing the problem, thanks!
Here is the sample code I am using:
in index.xml
<Alloy> <NavigationWindow> <Window id="win" backgroundColor="#fff"> <ListView id="listView" defaultItemTemplate="template"> <Templates> <ItemTemplate name="template"> <ImageView bindId="pic" id="icon" /> <Label bindId="info" id="title" onsingletap="singletap"/> /*whenever I remove this event listener, I will be able to receive singletap event on window. However if I left it here, I cannot get the event bubbled to window*/ <Label bindId="es_info" id="subtitle" /> </ItemTemplate> </Templates> <ListSection headerTitle="Fruit / Frutas"> <ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" /> <ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" /> </ListSection> <ListSection headerTitle="Vegetables / Verduras"> <ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" /> </ListSection> </ListView> </Window> </NavigationWindow> </Alloy>in controller index.js
function singletap(e){ console.log("single tapped on title"); e.cancelBubble = false; } $.win.addEventListener("singletap", function(){ console.log("received singletap event at window"); }); if(OS_IOS){ $.index.open(); }