События onmouseclick и onmouseup не записывают правильные координаты - PullRequest
Новая
       33

События onmouseclick и onmouseup не записывают правильные координаты

0 голосов
/ 02 августа 2020

Я новичок в JavaScript, и я пытаюсь записать координаты, по которым запускаются два события onmouseclick и onmouseup , но я получаю удивительные (для меня) результаты . Может ли кто-нибудь указать мне правильное направление? Это URL: https://www.uberclicked.com/app/drag.html Это мой код: 

<style type="text/css">
    .img{position:absolute;z-index:1;}
    #container{display:inline-block;width:960px;height:960px;margin: 0 auto;background: black;position:relative;border:0;border-radius:0;box-shadow: 0 0 0 #333}
    #canvas{position:relative;z-index:20;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
    <body>
        <center>
            <h2><span id="coords"></span></h2>
            <div id="container">
                <img id="photo" class='img' src="./test.png" width="960" height="960" style="border:10px white" ismap alt=""/>
                <canvas id="canvas" width="960" height="960"></canvas>
        </div>
        </center>
    </body>
</html>
<script>

var canvas = document.getElementById('canvas');
var coords = document.getElementById('coords');

var start_x=0, start_y=0, finish_x=0, finish_y=0;

$(document).ready(function() {
    $("canvas").on("click", function(event) {
        start_x = event.pageX - this.offsetLeft - container.offsetLeft;
        start_y = event.pageY - this.offsetTop - container.offsetTop;
    });
});

$(document).ready(function() {
    $("canvas").on("mouseup", function(event) {
        finish_x = event.pageX - this.offsetLeft - container.offsetLeft;
        finish_y = event.pageY - this.offsetTop - container.offsetTop;
        
        coords.innerHTML = 'start='+start_x+','+start_y+', finish='+finish_x+','+finish_y;
    });
});

</script>
...