Question

I have a carousel with four panels.

Its working fine, i am able to navigate from one to second and so on.

My 4th panel has one Canvas for drawing.

When i start drawing, the carousel changes the page as usual, but i dont want to change the page at this time as the user is drawing something.

How to stop this event when i am drawing , and bind the event again when i select the hand tool?

I have made one Hand/Draw tool button to change these settings.

I have tried handling event propogation and used capture method to so that i can stop things. But i was not able to get the result as expected.
Any help is much appreciated.

Thanks.

Answer 1

If you’re toggling the card between a sort of editable/uneditable mode, maybe something like

toggleEditHandler() { 
  var nothing = function() {return false;};
  //if toggled to edit
    card.element.on('*', nothing, card);

  //else 
    card.element.un('*', nothing, card);
}

Note this is rough pseudocode because I didn’t want to assume how you’d do your handler, but it’s a quick hack that generally should work. For what it’s worth, I got the idea from code in the official mask object that prevents actions from bubbling.