Question

I’m looking at this:

http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas

However, I have one problem with that – I need to be able to click on the pages, even the edges, without triggering the page turn. I want the pages to turn when a button outside of the canvas is pressed. Is this possible using the base they provided, or do I need to go an entirely different direction?

Answer 1

Yes that can be done.

From what i can see, you need a click event that doesnt trigger the page drag. You need to assign a flag for this.

Let Drag = mouse drag/mouse move, down = mouse down, release = mouse release events respectively.
Initialize your flag variable as false. When a drag event is encountered it becomes true. Otherwise it remains false. As long as it is false when the mouse release event occurs it can be treated as a click. Thats the basic principle behind using mousedown and mouseup as a click event.

You will have to use e.srcElement or e.target to give you the element your cursor is currently positioned over inorder to trigger click functions relative to that element.

If you want a more detailed explanation on the page flip technique then check this out. Helped me lot.