Cancel event bubbling?

[matt405]

I have an interesting problem which I would welcome some advice on. I have some code that I have used before which allows people to sign the screen. The code is simple enough and captures the movement by detecting the event.move phase. Whilst in this phase the code draws a line from the last phase x and y to the new x and y. You end up with a pretty good signature capture. I then save the group as a jpeg and the signature is saved.

Now, I went to embed this code into a scrollView widget. What is happening now is that the move phase is not showing up on my code anymore. I suspect it is appearing against the scroll view.

A work around for me is to open an overlay and get them to sign this, however back in my java script days you used to be able to cancel event bubbling. The idea being that when you had objects on top of other objects you could stop the events being passed through.

In this example I think I have my scroll view. Inserted into this is my signature group. If I could stop the events being passed through to the scroll view for my signature group then it would work.

Has anyone come across this before and have any good ways of stopping events being passed through the groups? I have noticed it before when I have a button in a scroll view. If you check for event.phase = ended it will not be caught as you only ever get the began phase. Not an issue as you test for began, but the movement phase is important for the signature to work.

Any help anyone has would be great…

[JonPM]

Have you tried to ‘return true’ at the end of your touch event function?  

[Alex10]

The way I’ve handled this, is to only pass focus to the scrollview after a certain movement threshold is met:

 if event.phase == "moved" then dy = event.y - event.yStart print(dy) if (dy \> 10) or (dy \< -10) then scrollView:takeFocus( event ) end end if event.phase == "ended" then print("DO STUFF HERE") end

[JonPM]

@Alex10

The way I’ve handled this, is to only pass focus to the scrollview after a certain movement threshold is met:

 if event.phase == "moved" then dy = event.y - event.yStart print(dy) if (dy \> 10) or (dy \< -10) then scrollView:takeFocus( event ) end end if event.phase == "ended" then print("DO STUFF HERE") end

I’m not sure if this will be a viable solution since he needs to capture a signature on top of the scroll view

[Alan_PlantPot]

I need to be able to do something similar a few years ago, and returning true was enough to stop the scroll view moving if I touched the “upper” object first.  

In my code below if I comment out the takeFocus() call, then touching the button (which is just a rect) will block touches to the scrollview. If I leave the call in, the moving past a certain point will allow the scrollview to use the touch event again (you may want to do something like this if they “sign outside the box” in your scroll view).

\_W = display.contentWidth \_H = display.contentHeight local widget = require("widget") local function scrollListener( event ) local direction = event.direction if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end local scroller = widget.newScrollView { left = \_W \* 0.1, top = 0, width = \_W \* 0.8, height = \_H \* 0.5, scrollWidth = \_W, scrollHeight = \_H \* 0.5, backgroundColor = {1, 0, 0}, hideScrollBar = true, listener = scrollListener, } local function buttonTouch(event) if event.phase == "began" then elseif event.phase == "moved" then local dx = event.x - event.xStart local dy = event.y - event.yStart local distance = math.sqrt((dx \* dx) + (dy \* dy)) -- if finger drags button more than 5 pixels, pass focus to scrollView if distance \>= 5 then --this line will give focus to scroll view if you want it to -- scroller:takeFocus( event ) end elseif event.phase == "ended" then print("hello") end --this will stop the touch event propagating to the scroll view automatically return true end

[matt405]

Thanks guys, yep, obvious really - needed that little nudge…

Of course, when I updated the event function it still did not work…  A little head scratch and then I worked that as my signature box is now part of the scroll view I have to add the offset of the scroll to any event x / y position to ensure that any line I am displaying is drawn in the correct place.

So, I have to now keep an offset track based on the scroll view as well, but that is all doable.

Thanks for your help as always…

[JonPM]

Have you tried to ‘return true’ at the end of your touch event function?  

[Alex10]

The way I’ve handled this, is to only pass focus to the scrollview after a certain movement threshold is met:

 if event.phase == "moved" then dy = event.y - event.yStart print(dy) if (dy \> 10) or (dy \< -10) then scrollView:takeFocus( event ) end end if event.phase == "ended" then print("DO STUFF HERE") end

[JonPM]

@Alex10

The way I’ve handled this, is to only pass focus to the scrollview after a certain movement threshold is met:

 if event.phase == "moved" then dy = event.y - event.yStart print(dy) if (dy \> 10) or (dy \< -10) then scrollView:takeFocus( event ) end end if event.phase == "ended" then print("DO STUFF HERE") end

I’m not sure if this will be a viable solution since he needs to capture a signature on top of the scroll view

[Alan_PlantPot]

I need to be able to do something similar a few years ago, and returning true was enough to stop the scroll view moving if I touched the “upper” object first.  

In my code below if I comment out the takeFocus() call, then touching the button (which is just a rect) will block touches to the scrollview. If I leave the call in, the moving past a certain point will allow the scrollview to use the touch event again (you may want to do something like this if they “sign outside the box” in your scroll view).

\_W = display.contentWidth \_H = display.contentHeight local widget = require("widget") local function scrollListener( event ) local direction = event.direction if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end local scroller = widget.newScrollView { left = \_W \* 0.1, top = 0, width = \_W \* 0.8, height = \_H \* 0.5, scrollWidth = \_W, scrollHeight = \_H \* 0.5, backgroundColor = {1, 0, 0}, hideScrollBar = true, listener = scrollListener, } local function buttonTouch(event) if event.phase == "began" then elseif event.phase == "moved" then local dx = event.x - event.xStart local dy = event.y - event.yStart local distance = math.sqrt((dx \* dx) + (dy \* dy)) -- if finger drags button more than 5 pixels, pass focus to scrollView if distance \>= 5 then --this line will give focus to scroll view if you want it to -- scroller:takeFocus( event ) end elseif event.phase == "ended" then print("hello") end --this will stop the touch event propagating to the scroll view automatically return true end

[matt405]

Thanks guys, yep, obvious really - needed that little nudge…

Of course, when I updated the event function it still did not work…  A little head scratch and then I worked that as my signature box is now part of the scroll view I have to add the offset of the scroll to any event x / y position to ensure that any line I am displaying is drawn in the correct place.

So, I have to now keep an offset track based on the scroll view as well, but that is all doable.

Thanks for your help as always…