Good afternoon, if you move the mouse cursor up and to the left, then the coordinates are displayed correctly, if you move the mouse down and to the right, then the script inserts incorrect coordinates, obviously small, one time, let's say "(0,0); (1, 3)" and so Further. If you disable the "zone-select" drawing, then the coordinates are transmitted correctly. Why is onmousemove passing invalid coordinates?

var rotate = 0; var rFix = "45"; var zoom = "in"; var xScroll = 0; var yScroll = 0; function zoomFullSide(event) { var cellZoomIn = 55 * 50; var cellZoomOut = 11 * 50; if (zoom === "in") { $('.side-full-zoom').css({ 'height': cellZoomIn + 'px', 'width': cellZoomIn + 'px', 'cursor': 'zoom-out' }); $('.side-full').scrollTop(yScroll * cellZoomIn / 550); $('.side-full').scrollLeft(xScroll * cellZoomIn / 550); zoom = "out"; } else if (zoom === "out") { $('.side-full').css('overfow', 'hidden'); $('.side-full-zoom').css({ 'height': cellZoomOut + 'px', 'width': cellZoomOut + 'px', 'cursor': 'zoom-in' }); zoom = "in"; } } function drawZoneSelect(event) { xScroll = Math.floor(event.offsetX / 10) * 10; yScroll = Math.floor(event.offsetY / 10) * 10; if (xScroll < 440 && yScroll < 440) { $('#log').text('y: ' + event.offsetY + ' x: ' + event.offsetX); $('.zone-select').css('top', event.offsetY); $('.zone-select').css('left', event.offsetX); } } 
 #modal-select-side { position: fixed; width: 100%; height: 100%; background-color: transparent; transition: all 0.5s ease; z-index: 10000; } #modal-select-side.animate { background-color: rgba(0, 0, 0, 0.8); } #modal-select-side .side-full { width: 550px; height: 550px; background-color: white; position: absolute; left: 50%; top: 50%; margin-left: -275px; margin-top: -275px; transform: scale(1); transition: all 0.8s ease; overflow: auto; } #modal-select-side .side-full .side-full-zoom { width: 550px; height: 550px; cursor: zoom-in; background: url(http://nn.by/img/w1500d4/photos/z_2015_10/cat-2un2u.jpg) no-repeat; background-size: cover; } #modal-select-side .side-full #select-cell { position: absolute; top: 0; left: 0; } #modal-select-side .side-full .zone-select { width: 110px; height: 110px; background-color: rgba(20, 180, 0, 0.7); position: absolute; } #modal-select-side .side-full.animate { transform: scale(1); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div> <div id="modal-select-side"> <div class="side-full"> <div class="side-full-zoom" onmousemove="drawZoneSelect(event)" onclick="zoomFullSide(event)"> <div class="zone-select"></div> </div> </div> </div>

    1 answer 1

    Found a solution to the problem, on top of everything another transparent element is created, on which the onmousemove event hangs, the coordinates of which are transmitted to the layer below it side-full-zoom