jquery - js pdfを表示しているキャンバスでjQuery mouseupイベントが発生しない

Question

ブラウザーにインラインで表示された PDF に座標をプロットする方法について、しばらく前にこの質問をしました。

@UselessCode は返信で非常に役に立ち、pdf.jsを教えてくれ、ページにドラッグされたボックスの座標を記録する方法のこのライブ デモを提供してくれました。

私は自分のページでこれを実験しており、PDF を表示しているキャンバス要素の mouseup イベントでいくつかの問題に遭遇しました。この例では、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 イベントは発生しません。

これについて別の質問をして申し訳ありませんが、以前の質問を無駄に復活させようとしましたが、この部分が機能するまでプロジェクトに行き詰まっています!