Clickable links in Page Flip demo

I followed the tutorial on http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html and got everything working except I can't seem to figure out how to mouseclick anything like an within the pages. I can use TAB to highlight the link and then enter to follow it but when I use the mouse it doesn't recognize anything other than the page flip animation. What else should I add to the Javascript to reenable the mouse click event on the links?

(function() {

// Dimensions of the whole book
var BOOK_WIDTH = 1391;
var BOOK_HEIGHT = 950;

// Dimensions of one page in the book
var PAGE_WIDTH = 651;
var PAGE_HEIGHT = 890;

// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;

// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 20;

var page = 0;

var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );

var mouse = { x: 0, y: 0 };

var flips = [];

var book = document.getElementById( "book" );

// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );

// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
    pages[i].style.zIndex = len - i;

    flips.push( {
        // Current progress of the flip (left -1 to right +1)
        progress: 1,
        // The target value towards which progress is always moving
        target: 1,
        // The page DOM element related to this flip
        page: pages[i], 
        // True while the page is being dragged
        dragging: false
    } );
}

// Resize the canvas to match the book size
canvas.width = BOO开发者_Python百科K_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );

// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";

// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );

document.addEventListener( "mousemove", mouseMoveHandler, false );
document.addEventListener( "mousedown", mouseDownHandler, false );
document.addEventListener( "mouseup", mouseUpHandler, false );

function mouseMoveHandler( event ) {
    // Offset mouse position so that the top of the book spine is 0,0
    mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
    mouse.y = event.clientY - book.offsetTop;
}

function mouseDownHandler( event ) {
    // Make sure the mouse pointer is inside of the book
    if (Math.abs(mouse.x) < PAGE_WIDTH) {
        if (mouse.x < 0 && page - 1 >= 0) {
            // We are on the left side, drag the previous page
            flips[page - 1].dragging = true;
        }
        else if (mouse.x > 0 && page + 1 < flips.length) {
            // We are on the right side, drag the current page
            flips[page].dragging = true;
        }
    }

    // Prevents the text selection
    event.preventDefault();
}

function mouseUpHandler( event ) {
    for( var i = 0; i < flips.length; i++ ) {
        // If this flip was being dragged, animate to its destination
        if( flips[i].dragging ) {
            // Figure out which page we should navigate to
            if( mouse.x < 0 ) {
                flips[i].target = -1;
                page = Math.min( page + 1, flips.length );
            }
            else {
                flips[i].target = 1;
                page = Math.max( page - 1, 0 );
            }
        }

        flips[i].dragging = false;
    }
}

function render() {

    // Reset all pixels in the canvas
    context.clearRect( 0, 0, canvas.width, canvas.height );

    for( var i = 0, len = flips.length; i < len; i++ ) {
        var flip = flips[i];

        if( flip.dragging ) {
            flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
        }

        // Ease progress towards the target value 
        flip.progress += ( flip.target - flip.progress ) * 0.2;

        // If the flip is being dragged or is somewhere in the middle of the book, render it
        if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
            drawFlip( flip );
        }

    }

}

function drawFlip( flip ) {
    // Strength of the fold is strongest in the middle of the book
    var strength = 1 - Math.abs( flip.progress );

    // Width of the folded paper
    var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );

    // X position of the folded paper
    var foldX = PAGE_WIDTH * flip.progress + foldWidth;

    // How far the page should outdent vertically due to perspective
    var verticalOutdent = 20 * strength;

    // The maximum width of the left and right side shadows
    var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
    var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
    var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );


    // Change page element width to match the x position of the fold
    flip.page.style.width = Math.max(foldX, 0) + "px";

    context.save();
    context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );


    // Draw a sharp shadow on the left side of the page
    context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
    context.lineWidth = 30 * strength;
    context.beginPath();
    context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
    context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
    context.stroke();


    // Right side drop shadow
    var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
    rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
    rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');

    context.fillStyle = rightShadowGradient;
    context.beginPath();
    context.moveTo(foldX, 0);
    context.lineTo(foldX + rightShadowWidth, 0);
    context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
    context.lineTo(foldX, PAGE_HEIGHT);
    context.fill();


    // Left side drop shadow
    var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
    leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
    leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');

    context.fillStyle = leftShadowGradient;
    context.beginPath();
    context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
    context.lineTo(foldX - foldWidth, 0);
    context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
    context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
    context.fill();


    // Gradient applied to the folded paper (highlights & shadows)
    var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
    foldGradient.addColorStop(0.35, '#fafafa');
    foldGradient.addColorStop(0.73, '#eeeeee');
    foldGradient.addColorStop(0.9, '#fafafa');
    foldGradient.addColorStop(1.0, '#e2e2e2');

    context.fillStyle = foldGradient;
    context.strokeStyle = 'rgba(0,0,0,0.06)';
    context.lineWidth = 0.5;

    // Draw the folded piece of paper
    context.beginPath();
    context.moveTo(foldX, 0);
    context.lineTo(foldX, PAGE_HEIGHT);
    context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
    context.lineTo(foldX - foldWidth, -verticalOutdent);
    context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);

    context.fill();
    context.stroke();


    context.restore();
}

})();

---

You're intercepting mouse clicks at the page level and, in your mouseDownHandler, you're doing a preventDefault. That is preventing the default behavior of a click.

---

I also am using the Page Flip demo and struggled with getting links to be click-able on account of the canvas element.

I realise your question specifically asks for a JS solution, but you can achieve your desired result using purely CSS. Simply add pointer events: none to the canvas element.

CSS:

    #pageflip-canvas {
        pointer-events: none;
    }

This will allow the user to click through to the links on your pages. You will need to add the following conditional CSS statement to your HTML for compatibility with IE:

    <!--[if IE]>
        <style type="text/css">
            #pageflip-canvas {
                background: none !important;
            }
        </style>
    <![endif]-->

(For a full compatibility list see here: http://caniuse.com/pointer-events)

jsFiddle demo here.