Question

我想在页面元素中计算鼠标坐标。

请检查jsfiddle：http://jsfiddle.net/t8w9k6gu/

＆＃13;

$('#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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

在此示例中，page元素为600x800像素。我需要的是在任何page元素中计算鼠标位置，无论缩放值，滚动条位置，头元素大小如何。

因此，例如，如果鼠标指针位于任何page元素的右下角，则坐标应始终为{600,800}，page的左上角应始终为{0,0} {1}}，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 at：http://jsfiddle.net/t8w9k6gu/1/

此时此刻对我的需求已经足够好了，但仍然不完全正确。所以，如果你能提出一些改进建议，请做。

Answer 1

如果不使用缩放而是使用变换比例，将会更容易。缩放调整大小然后渲染，在缩放渲染的位置，然后调整离开坐标系统的大小。

然后使用ev.offsetX和ev.offsetY？他们应该给你你想要的坐标。这将在所有缩放级别为您提供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的左侧和顶部值。

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

无论缩放，滚动，大小，鼠标在子元素中的位置

2 个答案: