Блог

первоначально мой холст не работал в мобильном браузере, после устранения кода исправления. но кнопка удара при нажатии не может работать. это применимо, когда вы находитесь в браузере на мобильном телефоне. из приведенного ниже javascript, где мне нужно исправить это, чтобы кнопки и другие вещи могли работать на дисплее мобильного телефона.

 <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>
 

и это мой html-код :

 <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">
                            <i class="fa fa-fw fa-refresh"></i>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>