jQuery mouseup事件未在显示js pdf的画布上触发

Question

前一段时间我问过this问题，关于如何在浏览器中内联显示的PDF上绘制坐标。

@UselessCode对他们的回复非常有帮助，指向pdf.js并提供this live demo如何记录拖到页面上的框的坐标。

我一直在我的页面上尝试过这个，并且在显示PDF的canvas元素上遇到了鼠标事件的一些问题。在 this example 上，您可以看到mousedown事件与mousemove事件一起触发，但不是mouseup事件。

$(function () {
"use strict";
var startX,
    startY,
    selectedBoxes = [],
    $selectionMarquee = $('#selectionMarquee'),
    $allCords = $('#all-cords'),
    positionBox = function ($box, coordinates) {
        $box.css(
            'top', coordinates.top
        ).css(
            'left', coordinates.left
        ).css(
            'height', coordinates.bottom - coordinates.top
        ).css(
            'width', coordinates.right - coordinates.left
        );
    },

    compareNumbers = function (a, b) {
        return a - b;
    },
    getBoxCoordinates = function (startX, startY, endX, endY) {
        var x = [startX, endX].sort(compareNumbers),
            y = [startY, endY].sort(compareNumbers);

        return {
            top: y[0],
            left: x[0],
            right: x[1],
            bottom: y[1]
        };
    },
    trackMouse = function (event) {
        var position = getBoxCoordinates(startX, startY, event.pageX, event.pageY);
        console.log(position);
        positionBox($selectionMarquee, position);
    },
    displayCoordinates = function () {
        var msg = 'Boxes so far:\n';

        selectedBoxes.forEach(function (box) {
            msg += '<li>(' + box.left + ', ' + box.top + ') - (' + (box.left + box.right) + ', ' + (box.top + box.bottom) + ')</li>';
        });
        $allCords.html(msg);
    };


$('#the-canvas').on('mousedown', function (event) {
    startX = event.pageX;
    startY = event.pageY;
    positionBox($selectionMarquee, getBoxCoordinates(startX, startY, startX, startY));
    $selectionMarquee.show();
    $(this).on('mousemove', trackMouse);
}).on('mouseup', function (event) {
    var position,
        $selectedBox;

        $selectionMarquee.hide();

        position = getBoxCoordinates(startX, startY, event.pageX, event.pageY);

        if (position.left !== position.right && position.top !== position.bottom) {
            $selectedBox = $('<div class="selected-box"></div>');
            $selectedBox.hide();
            $('body').append($selectedBox);

            positionBox($selectedBox, position);

            $selectedBox.show();

            selectedBoxes.push(position);
            displayCoordinates();
            $(this).off('mousemove', trackMouse);
        }
});
});

我玩过这个并且似乎在我向画布添加绝对或固定位置时触发mouseup事件，但是然后mousemove事件不会触发。

我很抱歉为此提出一个单独的问题，但我试图重复我之前的问题无济于事，我真的坚持我的项目，直到我能让这部分工作！