Mouse position in children regardless of scale, scroll, size

Question

I am trying to calculate mouse coordinates in page elements.

Please check jsfiddle at: http://jsfiddle.net/t8w9k6gu/

$('#p1, #p2, #p3').on('click mousemove touchmove', function(ev){
    var target = ev.originalEvent.currentTarget;
    var offset = $(target).offset();
    
    var x = ev.originalEvent.pageX;
    var y = ev.originalEvent.pageY;
    
    $(coords).html(x + ', ' + y);
    
    $(elm).html(target.id + ' {' + offset.left + ', ' + offset.top + '}');
    
});


var main = $('#main');
var content = $('#content');
var zoom = $('#zoom');
var coords = $('#coords');
var scroll = $('#scroll');
var zoomv = 0.5;
$(content).css({zoom: zoomv});
$('#headh').html($('#head').height());
$('#headsize').on('click', function(ev){
    $('#headbig').toggle();
    $('#headh').html($('#head').height());
});
$('#zoomin').on('click', function(){
    zoomv += .1;
    $(content).css({
        zoom: zoomv
    });
    $(zoom).html(zoomv);
});
$('#zoomout').on('click', function(){
    if(zoomv < .2){
        return;
    }
    zoomv -= .1;
    $(content).css({
        zoom: zoomv
    });
    $(zoom).html(zoomv);
});

$(main).on('scroll', function(ev){
    $(scroll).html($(main).scrollLeft() + ', ' + $(main).scrollTop());
});

html, body{
    margin:0;
    padding:0;
}
#head{
    border:2px #880 solid;
}
#headbig{
    border:2px #ccc dashed;
    height:50px;
    display: none;
}
#main{
    overflow:auto;
    height:186px;
    background-color:#f00;
}
#content{
    height:0;
    position:relative;
    overflow:visible;
    background-color: #00f;
}
#p1, #p2, #p3{
    background-color:#0ff;
    margin:10px;
    width:600px;
    height:800px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="wrap">
        <div id="head">
            <input type="button" id="zoomin" value="Zoom in" />
            <input type="button" id="zoomout" value="Zoom Out" />
            <input type="button" id="headsize" value="Resize head" />
            <br />
            Mouse coords: <span id="coords">0, 0</span>
            <br />
            Element offset: <span id="elm">null, 0, 0</span>
            <br />
            Main scroll: <span id="scroll">0, 0</span>
            <br />
            Content zoom: <span id="zoom">0.5</span>
            <br />
            Head height: <span id="headh">0</span>
            <div id="headbig"></div>
        </div>
        <div id="main">
            <div id="content">
                <div id="p1">
                    <h1>Page 1</h1>
                </div>
                <div id="p2">
                    <h1>Page 2</h1>
                </div>
                <div id="p3">
                    <h1>Page 3</h1>
                </div>
            </div>
        </div>
    </div>

Run codeHide result

In this example, the elements pageare 600x800 pixels in size. I need to get the calculated position of the mouse in any of the elements page, regardless of the scaling value, scroll bar position, size of the head element.

So, for example, if the mouse pointer is in the lower right corner of any element page, the coordinates should always be {600,800}, the upper left of pageshould always be {0,0}, and the center pageshould be {300,400}. Regardless of the scale, scroll, or head size.

mouse event (pageX/pageY), page, , ,..., page.

, (html, css) . , .

, iOS Safari Android Chrome.

, , .. .

Edit:

, , - getBoundingClientRect :

var bb = target.getBoundingClientRect();    
var x = ev.originalEvent.pageX / zoomv - bb.left;
var y = ev.originalEvent.pageY / zoomv - bb.top;

Jsfiddle at: http://jsfiddle.net/t8w9k6gu/1/

, . , , .

Answer 1

, . , , , , , .

ev.offsetX ev.offsetY? , . 0,0 600 800 .

$('#zoomin').on('click', function(){
    zoomv += .1;
    $(content).css({
        'transform-origin': 'left top',
        transform: 'scale(' + zoomv + ')'
    });
    $(zoom).html(zoomv);
});

http://jsfiddle.net/t8Lya59L/

Answer 2

div, div .

i a b, div, x y.

http://jsfiddle.net/t8w9k6gu/8/

 function(ev){
    var target = ev.originalEvent.currentTarget;
    var offset = $(target).offset();
    var a = offset.left
    var b = offset.top
    var x = ev.originalEvent.pageX;
    var y = ev.originalEvent.pageY;

    $(coords).html((parseInt(x)-parseInt(a)) + ', ' + (parseInt(y)-parseInt(b)));

    $(elm).html(target.id + ' {' + offset.left + ', ' + offset.top + '}');  
});