无论缩放、滚动、大小如何，子元素内的鼠标位置

Question

我正在尝试获取页面元素内的计算鼠标坐标。

请查看 jsfiddle：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>

在本例中，page 元素为 600x800 像素。 我需要的是在任何page 元素中计算鼠标位置，而不管缩放值、滚动条位置、头部元素大小。

因此，例如，如果鼠标指针位于任何 page 元素的右下角，则坐标应始终为 {600,800}，page 的左上角应始终为 {0,0}，而page 应该是 {300,400}。无论缩放、滚动、头部大小。

我尝试了许多使用鼠标事件 (pageX/pageY)、page 元素偏移、滚动位置、缩放等计算组合，但我找不到正确计算位置的正确方法page 元素。

此布局是更复杂的应用程序的一部分，因此布局（html、css）无法更改。我需要找到如何使用这种精确布局计算位置。

我需要在 PC Chrome 浏览器以及移动 iOS Safari 和 Android Chrome 浏览器上进行这项工作。

任何帮助、建议、阅读指南等将不胜感激。

编辑：

到目前为止我能得到的最接近的是使用getBoundingClientRect 来计算位置：

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

Jsfiddle 在：http://jsfiddle.net/t8w9k6gu/1/

目前已经足够满足我的需求，但仍不完全正确。因此，如果您可以提出一些改进建议，请提出建议。

Answer 1

如果您不使用缩放，而是使用变换比例，它会更容易。缩放调整大小然后渲染，而缩放渲染，然后调整大小，不考虑坐标系。

然后使用ev.offsetX和ev.offsetY？他们应该给你你所追求的坐标。这将在所有缩放级别为您提供 0,0 到 600,800 之间的 chrome。

$('#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 的 left 和 top 值。

我使用两个变量 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 + '}');  
});