Canvas touchmove has the effect that the button can't work on the mobile browser

initially my canvas was not working in mobile browser, after getting the fix code resolved. but the impact button is touched can't work. this applies when in the browser on the cellphone. from the javascript below, where do I need to fix it so that buttons and other things can work on the cellphone display.

<script type="text/javascript">
    var isDown = false;
    $('#colors_sketch').mousedown(function (e) {
        isDown = true;
    });
    $('html').mouseup(function (e) {
        isDown = false;
    });
    $('html').mousemove(function (e) {
        if (isDown) {
            $('#colors_sketch').offset({ top: e.pageY - 40, left: e.pageX - 40 });
        }
    });

    function touch2Mouse(e) {
        var theTouch = e.changedTouches[0];
        var mouseEv;

        switch (e.type) {
            case "touchstart": mouseEv = "mousedown"; break;
            case "touchend": mouseEv = "mouseup"; break;
            case "touchmove": mouseEv = "mousemove"; break;
            default: return;
        }

        var mouseEvent = document.createEvent("MouseEvent");
        mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null);

        theTouch.target.dispatchEvent(mouseEvent);
        e.preventDefault();
    }

    document.addEventListener("touchstart", touch2Mouse, true);
    document.addEventListener("touchmove", touch2Mouse, true);
    document.addEventListener("touchend", touch2Mouse, true); 
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#colors_sketch').sketch(); 

        $("#BtnApproved").click(function () { // <= it works at desktop not in mobile
            alert("TEST FOR DESKTOP");
        });

        $('#BtnApproved').on({ // <= it works at mobile, but i don't want with this script 
            'touchstart': function () {
                alert("TEST FOR MOBILDE");
            }
        });
    }); 
</script>

<div class="table-responsive">
                        <canvas id="colors_sketch" class="iscanvas" width="500" height="200" style="border: 1px #ccc solid"></canvas>
                        <div id="ClearDraw" title="Clear">
                            class="fa fa-fw fa-refresh">Clear
                        </div>
                    </div>
<div class="col-lg-12">
                    <button type="button" class="btn btn-success" id="BtnApproved">Approved</button>
                    <button type="button" class="btn btn-danger" id="BtnRejected">Rejected</button>
                    <button type="button" class="btn btn-primary" id="BtnAssignTo">Assign to</button>
                    <button type="button" class="btn btn-default btnform" id="BtnBack">Back</button>
                </div>